有没有办法在 <amp-img> 中使用 onerror() 属性

Question

有没有办法在 <amp-img> 中使用 onerror 属性？

它在 html 中运行良好。

<img src="../images/some-logo1.jpg" onerror="this.src='../images/no-img.jpg';" class="posting-logo-img">

但是 amp html 会在 amp-img 中创建 img 标签

<amp-img src="/img/amp.jpg" alt="AMP" class="posting-logo-img" onerror="this.src='../images/no-img.jpg';" >
  <noscript>
    <img src="/img/amp.jpg" alt="AMP"> 
  </noscript>
</amp-img>

Answer 1

我们不能在 amp-img 中使用 onerror 属性，但是，amp 提供 Offline Fallback 功能而不是 onerror。

amp-img 支持 AMP 的通用属性，这意味着您可以在无法加载图像的情况下显示回退。这非常适合为您的 AMP 添加离线支持。

当原始图像不可用或 return 404 时，这会为您提供在 fallback div:

中给出的文本输出

<style amp-custom>
  amp-img > div[fallback] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    border: solid 1px #ccc;
  }
</style>

<amp-img src="/img/product-image.jpg" width="300" height="100" layout="responsive" class="m1">
    <div fallback>offline</div>
</amp-img>

输出：

现在，如果您想在找不到原始图像时显示任何图像（例如无图像）而不是文本，请为 fallback [=] 设置 background image 45=]

<style amp-custom>    
  amp-img > div[fallback] {
     background:url('/img/does-not-exist.jpg') no-repeat;
  }
</style>

<amp-img src="/img/product-image.jpg" width="300" height="100" layout="responsive" class="m1">
    <div fallback></div>
</amp-img>

输出：

查看官方文档： Amp Image - Offline Fallback

有没有办法在 <amp-img> 中使用 onerror() 属性

Is there any way to use onerror() attribute in <amp-img>

html

amp-html

amp-img