HTMLImageElement: src 属性

值

当只提供单个图像而不是一组图像（浏览器会从中选择最适合视口大小和显示像素密度的图像）时，src 属性是一个字符串，用于指定所需图像的 URL。这可以通过在 HTML 中使用 src 内容属性来设置，或者通过以编程方式设置元素的 src 属性来设置。

如果您使用 srcset 内容属性为不同显示像素密度提供多个图像选项，则 src 属性指定的 URL 的用途有两种：

• 作为不支持 srcset 的浏览器的备用（fallback）。
• 作为指定 srcset 中尺寸乘数为 1x 的图像的等效项；也就是说，由 src 指定的图像用于低密度屏幕（例如，典型的 72 DPI 或 96 DPI 显示器）。

此外，如果您同时使用 src *和* sizes（或相应的 sizes 内容属性）*以及* srcset 来根据视口大小选择图像，则 src 属性仅用作不支持 sizes 和 srcset 的浏览器的备用；否则，它根本不会被使用。

示例

指定单个图像

HTML

<img
  src="grapefruit-slice-332-332.jpg"
  width="160"
  alt="Slices of grapefruit, looking yummy." />

结果

将 src 与图像集结合使用

当使用 srcset 属性的图像集时，src 用作旧浏览器的备用，或者用作图像的 1x 尺寸。

HTML

结果

为基于视口的图像选择指定备用

当通过同时指定 sizes 属性从 srcset 中进行基于视口的图像选择时，src 属性将作为备用，用于不支持基于视口的图像选择的浏览器。*支持* 基于视口的图像选择的浏览器在这种情况下会忽略 src。

HTML

结果

规范

浏览器兼容性