The key to adding images in HTML is to use the img tag and set the properties correctly. First, you must use the tag and set the src attribute to specify the image path. Secondly, it is recommended to add the alt attribute to provide alternative text; the path can be a relative path or an absolute path, and you need to pay attention to case, format support and server configuration; in addition, the picture style can be controlled through CSS to enhance responsiveness and aesthetics.

Adding images in HTML is actually very simple. The key is to use the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251980487008.jpeg" class="lazy" alt="How to add an image in HTML?" > tag and correctly set the relevant attributes.

Insert image using <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251980641306.jpeg" class="lazy" alt="How to add an image in HTML?" > tag

The most common way to add images in HTML is to use the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251980641306.jpeg" class="lazy" alt="How to add an image in HTML?" > tag. This tag is a self-closed tag and does not require an end tag. The basic structure is as follows:

 <img src="/static/imghw/default1.png"  data-src="logo.png"  class="lazy" alt="Alternative Text">

• src is required to indicate the source address of the image.
• alt is optional but recommended to be used to display alternative text when the image cannot be loaded, and also helps with barrier-free access.

For example, if you have an image called logo.png placed in the current directory, you can write it like this:

 <img src="/static/imghw/default1.png"  data-src="logo.png"  class="lazy" alt="Website LOGO">

If it is an online picture, just use the link:

 <img src="/static/imghw/default1.png"  data-src="https://example.com/image.jpg"  class="lazy" alt="Example Picture">

How to write the image path?

Path is one of the most common ways for beginners to make mistakes. The following are the common ways to write it:

• Relative path : relative to the location of the current HTML file. For example:

  • Same directory: <img src="/static/imghw/default1.png" data-src="photo.jpg" class="lazy" alt="How to add an image in HTML?" >
  • In the subdirectory: <img src="/static/imghw/default1.png" data-src="images/photo.jpg" class="lazy" alt="How to add an image in HTML?" >
  • Previous level directory: <img src="/static/imghw/default1.png" data-src="../photo.jpg" class="lazy" alt="How to add an image in HTML?" >

• Absolute path : The complete URL address, suitable for reference to external resources.

  • Example: <img src="/static/imghw/default1.png" data-src="https://yourdomain.com/images/photo.jpg" class="lazy" alt="How to add an image in HTML?" >

Tips: If the path is written incorrectly, the image will not be displayed. You can use the browser developer tool to check whether the request has failed.

FAQs and Suggestions

Sometimes the picture is not displayed, it may not be a problem with the code, but these details are not paid attention to:

• Whether the file name is case-sensitive (Linux server)
• Whether the image format is supported (such as .jpg , .png , .gif , etc.)
• Whether the server configuration allows access to files under this path
• Are network pictures restricted by anti-theft links?

If the picture does not appear, you can check it from these aspects.

Set image size and style (optional)

Although the <img src="/static/imghw/default1.png" data-src="photo.jpg" class="lazy" alt="How to add an image in HTML?" > tag itself supports width and height attributes, it is now recommended to use CSS to control the style:

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="How to add an image in HTML?"   style="max-width:90%">

Or use the class selector to work with the CSS file:

 <img class="responsive-img lazy"  src="/static/imghw/default1.png"  data-src="photo.jpg"  alt="Scenic Map">

Then define the style of .responsive-img in CSS.

Basically all this is it, adding pictures is not difficult. The key is that the path must be correct and the format must be supported. Others are bonus points.

The above is the detailed content of How to add an image in HTML?. For more information, please follow other related articles on the PHP Chinese website!