How to link pictures in html

In HTML, we can use the <img src="/static/imghwm/default1.png" data-src="images/myimage.jpg" class="lazy" alt="How to link pictures in html" > tag to display images on the web page, and we can also reference images on the Internet through links. This article will give you a detailed introduction to how to link images in HTML.

The first step is to know where the image to be linked is. Generally, pictures can be divided into two categories: local pictures and network pictures. Local pictures are pictures stored on our own computers, while network pictures are pictures stored on the Internet, and we need to access it through a link.

For local images, we need to add the src attribute to the <img src="/static/imghwm/default1.png" data-src="images/myimage.jpg" class="lazy" alt="How to link pictures in html" > tag to specify the path and file name where the image is stored. For example:

<img src="/static/imghwm/default1.png"  data-src="images/myimage.jpg"  class="lazy" alt="My Image">

Here, images/myimage.jpg in the src attribute points to an image stored in a folder named "images" An image named "myimage.jpg". At the same time, we can also use the alt attribute to specify the alternative text of the image. Alternative text is mainly used in the following two situations:

1. When the image cannot be loaded, the alternative text will be displayed
2. When using an auxiliary tool such as a screen reader, it can be read out Alternative text to replace the image

If we want to link to an online image, we can use the URL of the online image as src## in the tag #The value of the attribute. For example:

<img src="/static/imghwm/default1.png"  data-src="https://example.com/images/myimage.jpg"  class="lazy" alt="My Image">

In this example, the

https://example.com/images/myimage.jpg in the src attribute points to a file stored in " An image named "myimage.jpg" from the website https://example.com".

When we use a link to reference an image, we need to add the URL address of the link in the

src attribute of the tag. For example:

<img src="/static/imghwm/default1.png"  data-src="https://example.com/images/myimage.jpg"  class="lazy" alt="My Image">

The picture in this example is referenced through a link. "https://example.com/images/myimage.jpg" is a link address to an image named "myimage.jpg" stored on the website "https://example.com".

In addition, in HTML we can use the

tag to create links. We can set the href attribute of the tag to the link address of the image, and then insert the tag within the tag to display the image. For example:

  <img src="/static/imghwm/default1.png"  data-src="https://example.com/images/myimage.jpg"  class="lazy" alt="My Image">

The

<img alt="How to link pictures in html" > tag here is the same as in the previous example, except now it is wrapped in the tag. When the user clicks on the image, it will automatically jump to the link specified by the href attribute. This method is very convenient when creating the effect of "click on the image to enter the link".

To summarize, the steps to use links to reference images in HTML are as follows:

Determine where the image is stored, which can be local storage or the network
1. In
2. <img alt="How to link pictures in html" >Specify the path or URL of the image in the src attribute of the tag
3. Optional: Specify alternative text for the image
4. Use tag wraps the <img alt="How to link pictures in html" > tag and specifies the value of the href attribute.

Hope this article can help readers understand how to link images in HTML.

The above is the detailed content of How to link pictures in html. For more information, please follow other related articles on the PHP Chinese website!