index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Book Image</title>
</head>
<body>
    <!-- Button to trigger the API call -->
    <button onclick="fetchBookById()">Fetch Book Image</button>

    <!-- Container to display the image -->
    <div id="imageContainer">
        <!-- Image will be displayed here -->
    </div>

    <script>
        // Function to fetch book by ID
        async function fetchBookById() {
            const bookId = '667be11ad608bd246873c836'; // Replace with your actual book ID
            const apiUrl = `http://localhost:6969/api/v1/books/${bookId}`; // Replace with your actual API endpoint

            try {
                // Fetch book data from the API
                const response = await fetch(apiUrl);
                console.log(response);
                const responseData = await response.json();
                console.log(responseData);

                // Extract image data from the response
                const imageData = responseData.data.image.url;
                console.log(imageData);

                // Create a new image element
                const imgElement = document.createElement('img');

                // Set the image source to the image cloudinary URL
                imgElement.src = imageData;

                // Clear existing image if any
                document.getElementById('imageContainer').innerHTML = '';

                // Append the image element to the container in your HTML
                document.getElementById('imageContainer').appendChild(imgElement);
            } catch (error) {
                console.error('Error fetching book:', error);
            }
        }
    </script>
</body>
</html>