amp-img

简介

AMP HTML 文件不支持普通的 HTML img 标签。通过 amp-img，AMP 提供了一个强大的替代方案。

设置

amp-img 是一个内置元素，并且通过 AMP 运行时自动导入。

<script async src="https://cdn.ampproject.org/v0.js"></script>

您可以使用 amp-bind 扩展来动态更改图像。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

基本用法

一个简单的自适应图像 - *宽度*和*高度*用于确定宽高比。使用 alt 来指定可以作为图像替代的文本。

<amp-img src="/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" alt="AMP"></amp-img>

HTML 5.1 提供了创建文本作为图像替代的指导。

srcset

使用 srcset 为不同的视口宽度和像素密度指定不同的图像（更改浏览器窗口的宽度以进行测试）。

<amp-img src="/static/samples/img/amp.jpg" srcset="/static/samples/img/amp.jpg 1080w, /static/samples/img/amp-900.jpg 900w, /static/samples/img/amp-800.jpg 800w,
/static/samples/img/amp-700.jpg 700w, /static/samples/img/amp-600.jpg 600w, /static/samples/img/amp-500.jpg 500w, /static/samples/img/amp-400.jpg 400w,
/static/samples/img/amp-300.jpg 300w, /static/samples/img/amp-200.jpg 200w, /static/samples/img/amp-100.jpg 100w" width="1080" height="610" layout="responsive" alt="AMP"></amp-img>

离线回退

amp-img 支持 AMP 的通用属性，这意味着如果图像无法加载，您可以显示一个 fallback。这对于向您的 AMP 添加离线支持非常有用。

离线

<amp-img src="/static/samples/img/does-not-exist.jpg" width="300" height="100" layout="responsive" alt="a non-existent image">
  <div fallback>offline</div>
</amp-img>

无脚本

如果要确保禁用 JavaScript 的用户可以看到您的图像，可以在 noscript 标签内添加一个额外的 img 元素。这也使得没有 JavaScript 运行时的网络爬虫能够发现您的图像。

<amp-img src="/static/samples/img/amp.jpg" width="475" height="268" layout="responsive" alt="AMP">
  <noscript>
    <img src="/static/samples/img/amp.jpg" width="475" height="268" alt="AMP">
  </noscript>
</amp-img>

隐藏加载指示器

使用 noloading 属性在页面加载时隐藏加载指示器。建议用于徽标和小型图像/图标。

<amp-img src="/static/samples/img/amp_by_example_logo.svg" width="208" height="40" alt="AMP by Example" noloading></amp-img>

动态更改 src

您可以使用 amp-bind 来动态更改 amp-img 的 src URL。请记住，如果图像的内容/含义发生变化，也要更改 alt。

<amp-img src="https://unsplash.it/300/200/?image=100" width="300" height="200" alt="Example image" [src]="myImageUrl" [alt]="myImageAlt">
</amp-img>
<button on="tap:AMP.setState({ myImageUrl: 'https://unsplash.it/300/200/?image=200', myImageAlt: 'Another example image' })">Change image</button>

垂直居中 amp-img

这里有一个使用弹性布局垂直居中 amp-img 的简单方法 (src)

<div class="outer">
   <amp-img class="inner" layout="responsive" src="https://unsplash.it/300/200" width="3" height="2" alt="a vertically centered amp-img">
   </amp-img>
 </div>

...这是 CSS

.inner{
  flex-basis: 0;
  -ms-flex-preferred-size: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.outer {
  height: 320px; /* adjust to your needs */
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

需要进一步的解释？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

前往 Stack Overflow

一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @sebastianbenz