img元素

August 25, 2023

前置知识

Origin 标头在同源的 HEAD 和 GET 请求中不会自动发送，其它情况下（即跨源和同源非 HEAD GET 请求）则自动携带
Referer 标头的发送策略可通过当前文档的 Referrer-Policy 标头或 <meta> 标签进行全局控制
默认情况下，非 http 文档的请求和 http 向 https 的请求不会发送 Referer 标头，并且为发起请求的文档的完整 URI （不含 hash）

一个最简单的 img 标签如下，仅考虑不设置其它策略的默认情况
将对 src 发送 GET，携带 Referer 标头，不携带 Origin 标头

html

<img src="http://example.net" />

width、height 以及 alt 是众所周知的属性，略。

crossorigin

若指定 crossorigin 属性，则图片请求为 CORS 请求（验证相应的响应标头）
携带 Referer 标头和 Origin 标头
属性可选值为

anonymous 默认值，不携带凭据
use-credentials 携带凭据（例如 Cookie，Authorization 标头）

referrerpolicy

referrerpolicy 属性可内联地指定 Referer 标头的发送策略

值	描述
no-referrer	不发送 Referer 标头
no-referrer-when-downgrade	HTTPS 文档请求 HTTP 图片时，不发送 Referer 标头
origin	请求的 Referer 标头被限制为：协议、主机和端口
origin-when-cross-origin	请求的 Referer 标头被限制为：协议、主机和端口。同源时仍将包含路径
same-origin	仅同源请求发送 Referer 标头，跨源请求则不包含 Referer 标头
strict-origin	仅在协议安全级别保持不变（HTTPS→HTTPS）的情况下发送 Referer 标头。而在目标的安全性降低（HTTPS→HTTP）时则不发送
strict-origin-when-cross-origin（default value）	执行同源请求时发送完整的 URL，且仅在协议安全级别保持不变（HTTPS→HTTPS）时发送 Referer，在目标安全性降低（HTTPS→HTTP）时则不发送。
unsafe-url	请求的 Referer 标头为：协议、主机、端口以及路径。（不安全）

decoding

decoding 属性可指定为

auto 默认值
sync 同步解码图像
async 异步解码图像

fetchpriority

fetchpriority 属性可作为图像请求优先级的参考值，可指定为

auto 默认值
high 高优先级
low 低优先级

loading

loading 属性可开启图像延迟加载，仅在浏览器开启 Javascript 时有效

eager 默认值。立即加载，即使图像在 viewport 以外
lazy 延迟加载图像（懒加载）

可以参考：https://www.zhangxinxu.com/wordpress/2019/09/native-img-loading-lazy/
谷歌：https://web.dev/browser-level-image-lazy-loading/

ismap

ismap 属性要求 img 元素嵌套在 a 标签下，点击图片将转至 a 标签指定的 href 加上 ?{x},{y}
xy 为图片被点击的坐标，例如 https://example.net/?200,150
注意这是将 href 直接拼接 ? 和坐标，即使 img.src 的 URL 已有 query 部分（所以这里最好避免使用 query）

html

<a href="https://example.net/">
    <img src="https://placekitten.com/400/300" ismap />
</a>

usemap

usemap 属性可指定关联的 map 标签

参见：https://developer.mozilla.org/docs/Web/HTML/Element/map

html

<img
    src="https://www.runoob.com/try/demo_source/planets.gif"
    width="145"
    height="126"
    alt="Planets"
    usemap="#planetmap"
/>

<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://www.runoob.com/images/sun.gif" />
    <area shape="circle" coords="90,58,3" alt="Mercury" href="https://www.runoob.com/try/demo_source/merglobe.gif" />
    <area shape="circle" coords="124,58,8" alt="Venus" href="https://www.runoob.com/images/venglobe.gif" />
</map>

srcset

略，参见：https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

html

<img
    srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
    src="elva-fairy-640w.jpg"
    alt="Elva dressed as a fairy"
/>

←Back to home

This work is licensed under CC BY-NC-SA 4.0

NickName

E-Mail

Website

Comments

Latest
Oldest
Hottest

YieldRay

img元素

Preview: