Web page creation question: Image file path

This article is original by 123WORDPRESS.COM Lightninger. You can remove this sentence when reprinting it, but do not change the content of the article under any excuse or in any way, otherwise you will be at your own risk! Please indicate the author and source when reprinting.
A long time ago until now, many netizens have asked me similar questions, especially after copying some graphic image special effects codes from this site, there are always problems such as pictures not being displayed. Here I write a relevant tutorial specifically for these beginners. If you don’t have any questions in this regard, please walk away!
Regarding the issue of applying images in web pages, that is, the application of image tags in web pages, let me summarize it for you below!
1) Overview of image labeling.
If a web page only has text but no images, it will seem to lose a lot of vitality. Images are a very important aspect in web page production. HTML professionally provides the <IMG> tag to output images to web pages. This tag has SRC, ALT, ALIGN, BORDER, WIDTH, and HEIGHT attributes.
2) Attribute introduction.
SRC attribute. For the <IMG> tag, its SRC attribute is a necessary attribute, that is, SRC must be assigned a value in the <IMG> tag and is an indispensable part of the tag. At this time, IMG should be written in the following format:
<IMG SRC="parameter value">
The parameter value is the full file name and path of the image.
We know that image files generally take up much more space than plain text files such as HTML documents, and web design often requires adding many images to increase its appeal. If these image files are to be added to the HTML document, the HTML document will become very large and will inevitably be slow to transmit over the network.
The <IMG> tag does not actually add the image to the HTML document, but tells HTML: which image file is it? Where? So that the HTML goes to the original location of the image file to call it. The function of the SRC attribute is to answer these two questions, so the parameter value of the SRC attribute must include the full file name of the image file, that is, the file name and extension, such as logo.gif, which answers the question of which image file it is; its parameter value must also include the path of the image file so that HTML knows where to find the image file.
How to write the path of the image file in the parameter value of the SRC attribute is often a problem for beginners.
The path to the image file can be a relative path or a URL. The so-called relative path refers to the path formed by the relative position of the file to be linked or embedded in the current HTML document and the current HTML file. If the HTML file and the image file (assuming the name is logo.gif) are in the same directory, the code can be written as <IMG SRC="logo.gif">; if the image file is placed in a subdirectory of the directory where the current HTML file is located (assuming the subdirectory is named images), the code should be <IMG SRC="images/logo.gif">; if the image file is placed in the upper directory of the directory where the current HTML file is located (assuming the upper directory is named home), the relative path must be a quasi-URL, that is, use "../" to represent the developer's website, followed by the path of the image file in the developer's website. For example, assuming that home is a directory under this website, the code should be <IMG SRC=”../home/logo.gif”>. If home is a subdirectory under the directory king under the website, the code should be written as <IMG SRC=”../king/home/logo.gif”>.
Other properties. The ALT, ALIGN, BORDER, WIDTH, and HEIGHT attributes of the <IMG> tag are optional. The ALIGN attribute is the alignment of the image, and its parameter values are left, center, and right; BORDER is the border of the image, and its parameter is greater than or equal to 0, and the default unit is pixels; the WIDTH and HEIGHT attributes are the width and height of the image, and the default unit of their parameters is pixels; the ALT attribute is the text displayed when the mouse moves over the image. Here we remind everyone to use this attribute when making web pages. What is the purpose of doing this? When an image cannot be displayed for some reason, a prompt text can be displayed, which increases user friendliness.

<<: Start nginxssl configuration based on docker

>>: Implementation of MySQL scheduled backup script under Windows

Getting Started with Mysql--sql execution process

Web page creation question: Image file path

Getting Started with Mysql--sql execution process

Solution to the problem that MySQL can be started when installed in WAMP but cannot be started after restart

Analysis of the implementation method of modifying the default network segment of Docker

A brief discussion on using virtual lists to optimize tables in el-table

Detailed example of using case statement in MySQL stored procedure

Examples of using MySQL pessimistic locking and optimistic locking

js to implement add and delete table operations

MySQL 5.7.23 installation and configuration graphic tutorial

Mysql database advanced usage of views, transactions, indexes, self-connections, user management example analysis

Example of how to start a container with multiple network interfaces using docker

Recommend

Native JS to implement image carousel JS to implement small advertising plug-in

An example of how to quickly deploy web applications using Tomcat in Docker

How to deploy SpringBoot project using Dockerfile

Full steps to create a password generator using Node.js

JavaScript design pattern chain of responsibility pattern

Summary of MySQL injection bypass filtering techniques

Detailed explanation of Vue3.0 + TypeScript + Vite first experience

CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8

Explanation of building graph database neo4j in Linux environment

Docker /var/lib/docker/aufs/mnt directory cleaning method

Summary of MySQL common functions

A brief discussion on the VUE uni-app life cycle

mysql 5.7.5 m15 winx64.zip installation tutorial

JavaScript+html to implement front-end page sliding verification (2)

Summary of seven MySQL JOIN types