Tengo una lista de imágenes como botones y cuando se hace clic aparece un modal que tiene la imagen a la izquierda con el texto a la derecha. Pero cuando cambio el src de la imagen en el modal, el navegador recupera la imagen de la base de datos. ¿Hay alguna manera de cambiar la imagen sin volver a buscarla ya que ya se ha descargado?
$(button).on("click", function () { // GET ALL THE INFO NEEDED FOR THE CARD const imgURL = this.querySelector("img").src; const name = this.querySelector(".__name").innerHTML; const position = this.querySelector(".__position").innerHTML; const questions = this.querySelectorAll('[data-js="question"]'); const answers = this.querySelectorAll('[data-js="answer"]'); // POPULATE THE CARD employeeCard.querySelector(".__name").innerHTML = name; employeeCard.querySelector(".__position").innerHTML = position; employeeCard.querySelector(".__img").src = imgURL; // CONSTRUCT ANSWERS AND QUESTIONS // SHOW THE CARD AFTER 200 MS setTimeout(() => { $(employeeCard).toggleClass("active"); }, 200); });por el hecho de que el navegador recupera la imagen al cambiar. Gracias por las respuestas de antemano.
¡Convertir la imagen y reutilizarla sería mi pensamiento! Puede implementar la limpieza si dice que tienen más de 50 elementos cargados. La salida de GenerateAvatar le dará un texto de entrada listo para src.
let GenerateAvatar = (url, resolve) => { fetch(`image_url`).then((response) => { return response.blob(); }).then(blob => { let reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.onerror = () => resolve(null); reader.readAsDataURL(blob); }); }; // Take the generatedAvatar/Image and re-use that someway/somehow!El comentario de Dave me ayudó a encontrar mi problema. Tenía el caché deshabilitado de mi navegador aún encendido, por lo que estaba constantemente buscando. Cuando apagué eso, solo usaría la imagen en caché. Gracias también BGPHiJACK por tu aporte.