Tengo numerosas imágenes pequeñas, que estoy renderizando usando HTML. Cuando un usuario hace clic en la imagen, se abren a continuación en un cuerpo modal en tamaño grande. Dado que necesito cambiar dinámicamente el contenido del cuerpo modal, por ejemplo, cuando se hace clic en Picture1.jpg, el cuerpo modal debe incluir picture1.jpg y viceversa.
Sin embargo, no estoy seguro de cómo activo el evento onclick en la etiqueta <a> o <img> para obtener información que me ayude a identificar en qué imagen se hizo clic.
<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal"> <img src="images/Picture1.jpg" alt="image not available"> </a> <a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal"> <img src="images/Picture2.jpg" alt="image not available"> </a>Modal
<div class="modal-body"> <img src="images/Picture1.jpg" alt="image not available" id="imagepreview" style="width:100%; height: 100%;" > </div>Puede usar event.target en javascript simple y $(this) si desea usar Jquery.
//Plain Javascript document.getElementsByTagName('img')[0].addEventListener("click", function(event) { console.log(event.target.src); }); //Jquery $('img').click(function() { console.log($(this).attr('src')); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://picsum.photos/200">Usaría un Button ya que en realidad no está vinculando, está realizando una función JS. Luego agregaría un detector de eventos a los botones que actualiza las imágenes de destino src en función del valor data-src del button .
const buttonList = document.getElementsByClassName('target-button'); const modalImg = document.getElementById('imagepreview'); const processImg = (imgSrc) => () => { modalImg.src = imgSrc; }; Array.from(buttonList).forEach((button) => { const buttonImgSrc = button.dataset.src; button.addEventListener('click', processImg(buttonImgSrc)) }); <button class="target-button" data-src="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal"> <img src="images/Picture1.jpg" alt="image not available" /> </button> <button class="target-button" data-src="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal"> <img src="images/Picture2.jpg" alt="image not available" /> </button> <img src="" alt="image not available" id="imagepreview" style="width:100%; height: 100%;" />