Home Web Front-end HTML Tutorial How to write the absolute path of HTML img tag? How to use absolute path of HTML img tag

How to write the absolute path of HTML img tag? How to use absolute path of HTML img tag

Aug 27, 2018 pm 06:29 PM
html img

This article mainly describes how to write and use the absolute path of the img tag in HTML. Interested friends can take a look together. If you have any questions, you can ask in the question area below.

First of all, let’s understand what an absolute path is:

is the real path of the file or directory on your homepage on the hard disk

Let’s take a look at this example first:

<!-- 当图片位置和源代码的父文件夹位置在同一父文件夹时候 应先返回父级文件夹../ 因此src地址填"..\images/baby.jpg" -->
<img src="/static/imghw/default1.png"  data-src="../images/baby.jpg"  class="lazy"   alt="1111" >
<!-- 当图片位置和源代码的位置在同一个文件夹时,可以直接访问。(alt属性的值是表示图片加载不出来时显示1111,不填不要紧) -->
<img src="/static/imghw/default1.png"  data-src="baby.jpg"  class="lazy"   alt="111">
<!-- 下面用绝对路径,我把图片放在桌面上 -->
<img src="/static/imghw/default1.png"  data-src="C:\Users\Air\Desktop\baby.jpg"  class="lazy"   alt="">
Copy after login

How to write the absolute path of HTML img tag? How to use absolute path of HTML img tag

Use an absolute path to put the photo on the web page for display.

The information says: Considering the security of the server, relative paths are used in HTML, that is, the root folder of the web server is used as the starting point, and entry parallel to the root or higher than the root of the web server is not allowed. other branch paths. In fact, static pages can write absolute paths.

The address of the image is stored in the database. The storage method is: this.getServletContext().getRealPath("/WEB-INF/cImage") plus the name of the image as the address.

For example: src="http://website site string/image file name of root path"

This image is in root. Then use slashes and write the path one by one. .

Another way is to use the tag to set the default path for the content of this web page in the href. Just write the image file name directly in img.

Absolute path, external network absolute path:

<img src="/static/imghw/default1.png"  data-src="http://phpyun.ke.163.com/http://www.PHP.cn/i/eg_tulip.jpg"  class="lazy"   alt="小编" />
Copy after login

This article ends here. If you have any questions, please ask below.

【Editor’s Recommendation】

What does the head tag in HTML mean? An article teaches you how to use the head tag correctly

Should hackers learn PHP or python? Rational analysis of ten differences between PHP and python

The above is the detailed content of How to write the absolute path of HTML img tag? How to use absolute path of HTML img tag. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1667
14
PHP Tutorial
1273
29
C# Tutorial
1255
24
Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

How do you parse and process HTML/XML in PHP? How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles