Замена изображений в Django (с помощью javascript/js)

Это блок HTML-кода, который содержит одно главное изображение и другие дополнительные изображения. Если пользователь щелкает по любому дополнительному изображению, оно должно быть заменено на основное. Логика работает нормально до тех пор, пока я не нажму на одно и то же изображение дважды. После этого главное изображение теряется

<img id="mainThumbnail" class="card-img-top mb-5 mb-md-0 rounded" src="{{ product.image.url }}" alt="{{ product.name }}" />

<!-- Additional Images -->
{% if additional_images %}
<div class="additional-images mt-4">
    <div class="row">
    {% for image in additional_images %}
        <div class="col-2">
            <img class="img-fluid rounded cursor-pointer thumbnail-image" src="{{ image.image.url }}" alt="Additional image for {{ product.name }}" onclick="swapImages('{{ image.image.url }}', this)" />
        </div>
    {% endfor %}
    </div>
</div>
{% endif %}

Это моя функция javascript

function swapImages(newImageUrl, clickedElement) {
    console.log(this);
    // Get the current main image URL
    const currentThumbnailUrl = document.getElementById('mainThumbnail').src;

    // Update the main thumbnail image with the new image URL
    document.getElementById('mainThumbnail').src = newImageUrl;

    // Update the clicked image with the previous main thumbnail image URL
    clickedElement.src = currentThumbnailUrl;

    // Remove 'selected' class from all thumbnail images
    document.querySelectorAll('.thumbnail-image').forEach(img => img.classList.remove('selected'));

    // Add 'selected' class to the clicked thumbnail image
    clickedElement.classList.add('selected');
}

document.querySelectorAll('.cursor-pointer').forEach(el => el.style.cursor = 'pointer');

Я не хочу использовать javascript, но это единственное решение, которое я могу найти. Я хочу, чтобы изображение заменялось при нажатии.

Вернуться на верх