How to reference local image path in html

html Methods for referencing local image paths: 1. Use relative paths. If the images and HTML files are in the same folder, you can directly use the file name of the image as the relative path; 2. Use absolute paths. Use absolute paths to reference local images, but this is usually not a best practice because absolute paths may cause problems in different environments; 3. Use Base64 encoding. Base64 encoding is a method of converting images into text strings. Embed image data directly into HTML.

#The operating environment of this article: Windows 10 system, Dell G3 computer.

There are several ways to reference local image paths in HTML, which will be introduced in detail below.

Use relative paths:

A relative path is a path relative to the location of the current HTML file. If the image and HTML file are in the same folder, you can directly use the file name of the image as the relative path. For example, if the image file is named "image.jpg", you can use the following code to reference the image in HTML:

<img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy"   alt="图片">

If the image file is located in the upper-level folder of the current HTML file, you can use "… /" to represent the upper-level folder. For example, if the image file is located in the "images" folder in the upper-level folder, you can use the following code to reference the image:

<img src="/static/imghwm/default1.png"  data-src="../images/image.jpg"  class="lazy"   alt="图片">

Similarly, if the image file is located in the lower-level folder of the current HTML file , you can use "./" to represent the current folder. For example, if the picture file is located in the "images" folder of the current folder, you can use the following code to reference the picture:

<img src="/static/imghwm/default1.png"  data-src="./images/image.jpg"  class="lazy"   alt="图片">

Use the absolute path:

The absolute path is The full path starting from the root directory. It is possible to use absolute paths to reference local images, but this is generally not a best practice as absolute paths can cause problems in different environments. However, if you really need to use an absolute path, you can use the following code to reference the image:

<img src="/static/imghwm/default1.png"  data-src="/path/to/image.jpg"  class="lazy"   alt="图片">

where "/path/to/" is the path of the image file relative to the root directory.

Use Base64 encoding:

Base64 encoding is a method of converting images into text strings, which can directly embed image data into HTML. This method is suitable for small images or when you need to reduce HTTP requests. You can use the following code to convert the image to Base64 encoding:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QA6RXhpZgAATU0AKgAAAAgABwEAAAQAAABsAAAABAAQAAA
EBAAABAAAAABsAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAB9KADAAQAAAABAAAB9AD/2wBDAAoHBwkHBgoJ

Among them, the part after "data:image/jpeg;base64," is the Base64 encoding of the image. Note that this method will increase the size of the HTML file and may affect the page loading speed.

No matter which method you use, you need to ensure that the image file exists in the specified path and that the path is correct. In addition, it is recommended to place the image files in the same folder as the HTML files or in a special image folder for easier management and maintenance.

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