What is the usage of src attribute of HTML img tag? Analysis of specific usage methods (examples attached)

This article mainly introduces the src attribute of the img tag in HTML and some of their definitions. Instructions for using the HTML img src attribute and some examples. Let’s take a look at it next.

First of all, let’s take a look at the definition of the img tag:

Images are also the most common html element in web pages, and they are a very important part. In HTML web pages, images are defined by tags. is an empty HTML tag or a single tag. It only contains attributes and no closing tags.

Definition of the src attribute of the img tag:

The src attribute of the tag is required. Its value is the URL of the image file, which is the absolute or relative path to the file that references the image.

Tip: In order to organize the storage of documents, creators usually store image files in a separate folder, and usually name these directories something like "pics" or "images". In the W3School online tutorial, our engineers store most of the commonly used images in a folder named "i". "i" is the abbreviation of "images". The advantage of this is that it can simplify the path to the greatest extent. .

The src attribute is the address of the imported image. Without it, the tag would be meaningless.

Format of the src attribute of the HTML img tag:

<img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy"   alt="图片描述">

Description: Image address: The location where the image is stored; Image description: A description of the meaning of the image, if the image cannot is displayed, the description is displayed.

Instructions for using the src attribute of the HTML img tag:

Directly give the src attribute the address of a server-side resource, and the img control will automatically obtain and parse the resource.

Pictures and HTML text are in the same directory: for example index.html and img.jpg

Writing:

Picture Not in the same directory as HTML: There are two situations:

1. The image img.jpg is in the folder images, and the index.html and images folders are in the same directory.

Writing method ：

2. The picture img.jpg is in the folder images, index.html is in the controller folder, and the images and controller folders are in the same folder Directory

Writing:

If the source comes from the Internet, you must use the absolute path

Writing:

If there is no picture, the browser will display the text in alt instead.

<img src="/static/imghw/default1.png"  data-src="lib/img/imgDef.png"  class="lazy"   alt="暂无图片" />

How to use the image path of the src attribute in img:

1.html file and *.jpg file (f drive) In different directories:

<img  src="/static/imghw/default1.png"  data-src="file:///f:/*jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="What is the usage of src attribute of HTML img tag? Analysis of specific usage methods (examples attached)" >

2.html files and *.jpg pictures are in the same directory:

<img  src="/static/imghw/default1.png"  data-src=".jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="What is the usage of src attribute of HTML img tag? Analysis of specific usage methods (examples attached)" >;

3.html files and *.jpg pictures are in different directories:

a. The picture *.jpg is in the image folder, *html is in the same directory as image:

<img  src="/static/imghw/default1.png"  data-src="image/*jpg/"  class="lazy"     style="max-width:90%"  style="max-width:90%"/ alt="What is the usage of src attribute of HTML img tag? Analysis of specific usage methods (examples attached)" >

b. The picture *jpg is in the image folder, *html is in the connage folder, The image and connage are in the same directory:

<img  src="/static/imghw/default1.png"  data-src="../image/*jpg/"  class="lazy"     style="max-width:90%"  style="max-width:90%"/ alt="What is the usage of src attribute of HTML img tag? Analysis of specific usage methods (examples attached)" >

4. If the image comes from the Internet, then write the absolute path:

<img  src="/static/imghw/default1.png"  data-src="http://image.php.cn/pcindexhot"  class="lazy"  /   style="max-width:90%"  style="max-width:90%"/ alt="What is the usage of src attribute of HTML img tag? Analysis of specific usage methods (examples attached)" >

Attributes of the src attribute of the HTML img tag:

【Editor’s Recommendation】

What is the content of the th header in the html table? Centered? A detailed introduction to the align attribute of the th header tag

html Why can't the P tag be nested in a div? There are also examples of css styles for html P tags

The above is the detailed content of What is the usage of src attribute of HTML img tag? Analysis of specific usage methods (examples attached). For more information, please follow other related articles on the PHP Chinese website!