Estoy creando un pequeño proyecto relacionado con la gestión de libros utilizando el archivo db.json como base de datos. Este es parte del código relevante para el problema real.
índice.html
<body> <ul class="books-container"></ul> <img src="" id="fullImage"> </body>db.js
const container = document.querySelector('books-container') const renderBooks = async () => { let uri = 'http://localhost:3000/books' const res = await fetch(uri) const books = await res.json() let template = ''; books.forEach(book => { template += ` <li class="books"> <img class="image" src="${book.image}" alt="${book.title}" data-image="${book.image}" width="80px" height="115px"> <h6 class="title">${book.title}</h6> </li> ` }) container.innerHTML = template } window.addEventListener('DOMContentLoaded', () => renderBooks()) window.addEventListener('click', (e) => { if(e.target.className == 'image') { let imageUrl = e.target.dataset.image document.getElementById('fullImage').setAttribute('src', imageUrl) } })Aquí estoy representando la imagen como miniatura y el título de la página html como plantilla. Quiero mostrar la imagen completa como modal cuando se hace clic en la miniatura, así que tomé la referencia de la imagen y mostré la imagen completa en función del evento de clic. Funciona bien y muestra la imagen completa, pero cuando hago clic en esa imagen completa, desaparece y me da un valor "indefinido". ¿Hay alguna otra forma de mostrar esa imagen completa sin quedar indefinida al hacer clic?
Gracias