有没有办法在<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>
答案 0 :(得分:6)
我们无法在onerror
中使用amp-img
属性,但是,amp提供Offline Fallback
功能而不是onerror
。
amp-img支持AMP的常用属性,这意味着您可以在无法加载图像的情况下显示回退。这非常适合为AMP添加离线支持。
如果原始图片不可用或返回404,则会显示您在后备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>
现在,如果您想要在未找到原始图像时显示任何图像(例如无图像)而不是文本,请为后备div设置背景图像
<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