How to Open the Image in a new tab or window in Html

In this tutorial, we are going to learn about how to open the image in a new tab or window in Html.

Normally, we add a image to the html page using the tag.

<img src="https://reactgo.com/download.png" />

If we click on the above image, it doesn’t open it in a new tab.

Opening image in a new tab

To open the image in a new tab, we need to wrap the image inside a <a> element and add the target attribute with a value _blank to it.

Here is an example:

<a href="https://reactgo.com/download.png" target="_blank">
    <img src="https://reactgo.com/download.png" />
</a>

In the example above, we first wrapped our image element inside a <a> element and added image url to the href , target="_blank". So, when a user clicks on a image it will open a image url in the new tab.

Note: If you are using the target=_blank, your page performance may suffer to avoid that you can use rel="noreferrer noopener".

<a href="https://reactgo.com" target="_blank" rel="noreferrer noopener">
   <img src="https://reactgo.com/download.png" />
</a>