#HTML 的 <img> 标签

<img> HTML 元素将一张图像嵌入文档。

#属性

• alt: 定义了图像的备用文本描述。
  • 非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
  • 用户选择不显示图像（比如为了节省带宽，或出于隐私考虑）
  • 图像文件无效，或是使用了不支持的格式
• crossorigin: 这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 <canvas> 元素中重复使用，而不会被标记为“污染（tainted）”。
  • anonymous: 发送忽略凭据的跨源请求（即，不携带 cookie、X.509 证书 或 Authorization 请求标头）。
  • use-credentials: 发送携带凭据的跨源请求（比如 cookie、X.509 证书和 Authorization 请求标头）。如果服务器不选择与源站共享凭据（通过返回 Access-Control-Allow-Credentials: true 响应标头） ，则浏览器会将图像标记为被污染且限制对其图像数据的访问。
• decoding: 为浏览器提供图像解码方式上的提示。允许的值：
  • sync: 同步解码图像，实现与其他内容互斥的原子渲染。
  • async: 异步解码图像，以减少其他内容的渲染延迟。
  • auto: 默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。
• fetchpriority: 提供获取图像时要使用的相对的优先级提示。允许的值：
  • high: 表示其获取优先级相对其他图像要高。
  • low: 表示其获取优先级相对其他图像要低。
  • auto: 默认值：表示自动确定其相对其他图像的获取优先级。
• height: 图像的固有高度，以像素为单位。必须是没有单位的整数值。
• ismap: 这个布尔属性表示图像是否是服务器端图像映射的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。
• loading: 指示浏览器应当如何加载该图像。允许的值：
  • eager: 立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。
  • lazy: 延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。
• referrerpolicy: 一个字符串，指示在获取资源时使用的来源地址（referrer）：
  • no-referrer ：不会发送 Referer 标头。
  • no-referrer-when-downgrade ：若未使用 TLS（HTTPS）导航到源站，则不发送 Referer 标头。
  • origin ：发送到源站的来源地址将被限制为：协议、主机和端口。
  • origin-when-cross-origin ：发送到其他来源的来源地址会被限制为协议、主机和端口。同源导航仍将包含路径。
  • same-origin ：仅同源请求发送来源地址，而跨源请求则不包含来源地址信息。
  • strict-origin ：仅在协议安全级别保持不变（HTTPS→HTTPS）的情况下将文档的来源作为来源地址发送。而在目标的安全性降低（HTTPS→HTTP）时则不发送来源地址。
  • strict-origin-when-cross-origin （默认值）：执行同源请求时发送完整的 URL，且仅在协议安全级别保持不变（HTTPS→HTTPS）时发送来源（origin），在目标安全性降低（HTTPS→HTTP）时则不发送来源。
  • unsafe-url ：来源地址包括来源（origin）和路径（path）（但不包括片段、密码或用户名）。这个值是不安全的，因为它将来源和路径从受 TLS 保护的资源泄露到不安全的来源。
• sizes: 表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：
  • 一个媒体条件。最后一项一定是被忽略的。
  • 一个资源大小的值。
• src: 图像的 URL，这个属性对 <img> 元素来说是必需的。在支持 srcset 的浏览器中，src 被当做拥有一个像素密度的描述符 1x 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 w 描述符中定义了。
• srcset: 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：
  • w 一个宽度描述符（一个正整数，后面紧跟 符号）。该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
  • x 一个像素密度描述符（一个正浮点数，后面紧跟 符号）。
• width: 图像的宽度，以像素为单位。必须是没有单位的整数。
• usemap: 与元素相关联的图像映射（image map）的部分 URL（以 # 开始的部分）。

#示例

<!-- 本站的一些图标 -->
<img src="https://hubenchang0515.github.io/primers/favicon.svg" alt="替代文本" width="64" height="64" />
<img src="https://hubenchang0515.github.io/moe-tools/favicon.svg" alt="替代文本" width="64" height="64" />
<img src="https://hubenchang0515.github.io/shift/favicon.svg" alt="替代文本" width="64" height="64" />
<img src="https://hubenchang0515.github.io/Phosphophyllite/favicon.svg" alt="替代文本" width="64" height="64" />

<!-- 不存在的图片会显示 alt 的内容 -->
<img src="example.jpg" alt="替代文本" width="300" height="200"/>

<img>