<div class="book-image-container">
                <div class="image-placeholder"></div>
                <img src="{{ url_for('serve_image', filename=book.image_url) }}" alt="{{ book.title }}" class="book-image" style="display: none;">
            </div>
            <p><a href="{{ url_for('book_details', book_id=book.id) }}" class="button">View Details</a></p>
        </div>
    {% endfor %}
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const images =