onClick event on the anchor/ image tag html

I have numerous small images, which I am rendering using HTML. When a user clicks on the image, they are next opened in modal body in big size. Since I need to dynamically change the content of modal body e.g. when Picture1.jpg is clicked, modal body should include picture1.jpg and vice versa.

However, I am not sure, how do I trigger onclick event on <a> tag or <img> tag to obtain some information that helps me to identify which image was clicked.

<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>

Answer

You can use event.target in plain javascript and $(this) if you want to use 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">