深入解析 img 标签的多维应用

文章导读：旨在帮助初学者学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

<img> 标签是用来展示图像的，在网页中合理的处理图像是一个很重要的知识点，也是面试中必考的，今天瑶琴带大家学习 <img> 标签的用法。

下面是 img 标签的具体用法

<img> 用于在网页上插入图像。以下是 <img> 标签的基本用法和相关属性：

1.基本用法

<img src="image.jpg" alt="图片描述">

src 属性：指定图像文件的路径。可以是相对路径（相对于 HTML 文件所在的位置）或绝对路径。 alt 属性：提供图像的描述或替代文本，当图像无法加载时，这段文本会显示在图像位置，也有助于可访问性和 SEO。

2.使用宽高：可以使用 width 和 height 属性来指定图像的宽度和高度（以像素为单位）。这可以防止页面在图像加载前因为没有正确的尺寸而出现布局问题。

<img src="image.jpg" alt="图片描述" width="300" height="200">

3.相对和绝对路径：图像的 src 属性可以是相对路径（相对于当前 HTML 文件所在的位置）或绝对路径（完整的 URL）。

相对路径是相对于当前网页文件的位置而言的路径。这意味着它是基于当前页面的文件结构来定义的路径。

假设以下文件结构：

project/
├── index.html
├── images/
│   ├── image.jpg

在 index.html 文件中引用位于 images 文件夹下的图像可以使用相对路径：

<img src="images/image.jpg" alt="图片描述">

绝对路径是从文件系统的根目录（或 Web 服务器的根目录）开始的完整路径。

假设图像位于 https://www.example.com/images/image.jpg，您可以使用绝对路径：

<img src="https://www.example.com/images/image.jpg" alt="图片描述">

或者，如果图像位于服务器上的文件夹中，您可以使用服务器相对路径：

<img src="/images/image.jpg" alt="图片描述">

这里的 / 表示服务器根目录。

4.图像格式：<img> 标签支持多种图像格式，如 JPEG、PNG、GIF 等。您应该根据实际需求选择适合的格式。

<a href="mailto:contact@example.com">联系我们</a>

5.图片链接：a> 标签可以用于将图片包裹在链接中，使用户可以通过点击图片跳转到其他页面。

<a href="https://www.example.com">
  <img src="image.jpg" alt="图片描述">
</a>

6.懒加载：懒加载是一种技术，可以延迟加载图像，提高网页性能。您可以使用 loading 属性来实现这一点。

<img src="image.jpg" alt="图片描述" loading="lazy">

7.响应式图像：为了适应不同屏幕尺寸，您可以使用 CSS 媒体查询或 picture> 元素来提供不同大小的图像

<picture>
  <source media="(max-width: 600px)" srcset="small-image.jpg">
  <img src="large-image.jpg" alt="图片描述">
</picture>

8.图像预加载：通过在页面加载前预加载图像，可以提高用户体验。您可以使用 JavaScript 或 HTML 的 preload 标签来实现。

<link rel="preload" href="image.jpg" as="image">

在面试中，常常会问道图片预加载的方式：

图像预加载是为了提前加载网页中的图像，以改善用户体验。以下是几种图像预加载的方式：

1.使用 HTML 的 preload 标签：

HTML5 引入了 preload 标签，可以用来在页面加载前预加载资源，包括图像。这是一种简单的方式，无需额外的 JavaScript。

<link rel="preload" href="image.jpg" as="image">

在这个例子中，浏览器会在加载页面时预加载 image.jpg 图像。

2.使用 JavaScript 预加载：

使用 JavaScript 可以更加灵活地预加载图像，您可以在页面加载过程中执行必要的预加载操作。

const image = new Image();
image.src = "image.jpg";

或者，预加载多个图像：

const imageUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
const images = [];

imageUrls.forEach(url => {
  const img = new Image();
  img.src = url;
  images.push(img);
});

在上述代码中，通过创建一个新的 Image 对象，并设置其 src 属性，可以在后台加载图像。这样，当您需要显示这些图像时，它们已经在浏览器中缓存了。

3.使用 CSS 隐藏图像：在某些情况下，你可能希望在加载图像之前，先隐藏它们，以防止它们在加载过程中显示在页面上。

.hidden-image {
  display: none;
}

<img src="image.jpg" alt="图片描述" class="hidden-image">

请注意，这种方式仅适用于某些情况，当图像需要显示时，使用合适的 CSS 或 JavaScript 将其显示出来

说完预加载，再来说说图片懒加载有哪些方式？

1.使用 loading 属性（HTML5）：HTML5 引入了 loading 属性，可以用于延迟加载图像，仅当图像进入用户视口时才会加载。

<img src="image.jpg" alt="图片描述" loading="lazy">

当用户滚动到图像所在的位置时，浏览器会自动加载图像。

2.使用 Intersection Observer（JavaScript）：Intersection Observer 是一种 JavaScript API，可以监听元素是否进入用户视口，从而实现懒加载

const images = document.querySelectorAll("img[data-src]");

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute("data-src");
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

在上述代码中，首先选择所有带有 data-src 属性的图像元素，然后通过 Intersection Observer 监听这些图像是否进入视口，一旦进入视口，将 data-src 属性的值赋给 src 属性，从而实现懒加载。

3.使用第三方库：有许多第三方 JavaScript 库可以帮助实现图片懒加载，例如 lazyload.js、lozad.js 等。可以引入这些库，按照文档的指引使用它们。

看到这里的朋友，关于 <img> 标签的内容，可以好好吸收下，<img> 标签的懒加载和预加载都是面试中常考的知识点，上面内容中关于 HTML5 和 javascript 的内容在后续的系列中都会学到。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。