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

这里有一个使用 flex 布局垂直居中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 撰写