How to add img path in html

青灯夜游
Release: 2023-01-03 09:25:39
Original
12513 people have browsed it

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 "<img src="URL">". 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.

How to add img path in html

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="URL">
Copy after login

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="file:///f:/*jpg" width="300" height="120"/>
Copy after login

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

<img src=".jpg" width="300" height="120"/>
Copy after login

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="image/*jpg/"width="300" height="120"/>
Copy after login

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="../image/*jpg/"width="300" height="120"/>
Copy after login

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

<img src="http://image.baidu.com/pcindexhot"/width="300" height="120"/>
Copy after login

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="https://img.php.cn/upload/article/202102/26/2021022610342015759.jpg" alt="flower">
Copy after login

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="/images/picture.jpg" alt="flower">
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!