amp-img 示例 - Html

amp-img 是一个用于加载图像的 HTML 标签。它是为 AMP(Accelerated Mobile Pages)项目设计的，旨在提高页面加载速度和性能。下面是一些用 amp-img 标签的示例。

基本用法

最基本的用法是指定图像来源的 URL，可以使用 src 属性来实现：

<amp-img src="/images/sample.jpg" width="300" height="200"></amp-img>

此示例将一个名为 sample.jpg 的图像插入页面中，并将其宽度设为 300 像素，高度为 200 像素。请注意，width 和 height 属性是必需的，编写 amp-img 标签时务必记住。

懒加载

amp-img 还支持懒加载。懒加载允许您只加载视图窗口中可见的图像，而不必立即加载页面上所有的图像。这对于提高页面性能和加载速度非常有用。

要启用懒加载，请使用 data- 标记，如下所示：

<amp-img src="/images/sample.jpg" width="300" height="200" layout="responsive" 
    data-amp-async data-amp-3p-sentinel="my-3p-sentinel">
</amp-img>

在此示例中，data-amp-async 标记指定了异步加载，而 data-amp-3p-sentinel 标记用于确保图像与 AMP 代码隔离。

样式控制

amp-img 允许您使用 CSS 来控制图像的样式，但请注意，有一些限制。例如，amp-img 不允许使用外部 CSS 文件，而只能在 style 标签中指定样式。以下示例演示如何使用内联样式控制 amp-img：

<amp-img src="/images/sample.jpg" width="300" height="200" style="border: 1px solid black;"></amp-img>

在此示例中，图像周围有一个黑色边框，这是通过在 style 属性中添加 border 样式实现的。

总结

amp-img 是一个非常有用的 HTML 标签，可用于在您的网站中加载图像。您可以使用它来实现基本的图像加载，懒加载和样式控制等功能。记得在编写 amp-img 标签时，始终包含必需的 width 和 height属性。