How to add img path in html

In the img tag in HTML, you can use the "src" attribute to add the img image path, which is used to specify the URL of the image, with the syntax "". The URL can be a relative path, such as "../image/*jpg/"; it can also be an absolute path, that is, the complete URL pointing to the image file.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

HTML tag

tag defines an image in an HTML page.

Note: Technically, images are not inserted into the HTML page, but linked to it. The tag creates a placeholder for the referenced image.

HTML src attribute

The src attribute of the img tag is required. It specifies the URL of the image.

Syntax

<img  src="/static/imghwm/default1.png"  data-src="URL"  class="lazy"   alt="How to add img path in html" >

Note: When a web page loads, the browser fetches the image from the web server and inserts it into the page. Therefore, make sure the image is at the same point as the relevant web page, otherwise visitors may get a broken link icon. If the browser cannot find the image, it will display a broken link icon.

[Recommended tutorial: "html video tutorial"]

Usage of image path in HTML Method

1. *html files and *.jpg files (f drive) are in different directories:

<img  src="/static/imghwm/default1.png"  data-src="file:///f:/*jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="How to add img path in html" >

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

<img  src="/static/imghwm/default1.png"  data-src=".jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="How to add img path in html" >

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

a. Pictures *.jpg are in the image folder, *html and image In the same directory:

 <img  src="/static/imghwm/default1.png"  data-src="image/*jpg/"  class="lazy"     style="max-width:90%"  style="max-width:90%"/ alt="How to add img path in html" >

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

<img  src="/static/imghwm/default1.png"  data-src="../image/*jpg/"  class="lazy"     style="max-width:90%"  style="max-width:90%"/ alt="How to add img path in html" >

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

<img  src="/static/imghwm/default1.png"  data-src="http://image.baidu.com/pcindexhot"  class="lazy"  /   style="max-width:90%"  style="max-width:90%"/ alt="How to add img path in html" >

Extended information:

The absolute path refers to The absolute position under the directory, directly reaching the target location, usually the path starting from the drive letter (root directory).

The path that completely describes the file location is the absolute path, which is the directory path based on the root directory of the web site. The absolute path name is specified from the root directory at the top of the tree directory structure to a directory or file. It consists of a series of consecutive directories separated by slashes until the directory or file to be specified. The last name is the directory or file to point to. The reason why it is called absolute means that when all web pages reference the same file, the path used is the same.

//绝对路径，指向一个因特网文件的完整 URL
<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/202102/26/2021022610342015759.jpg"  class="lazy"   alt="flower">

Relative path refers to the path relationship with other files (or folders) caused by the path where this file is located. Using relative paths can bring us a lot of convenience. HTML absolute path refers to the full path of the file with domain name.

//文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：
<img src="/static/imghwm/default1.png"  data-src="/images/picture.jpg"  class="lazy"   alt="flower">

For more programming-related knowledge, please visit: Programming Video! !

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