Есть ли способ использовать атрибут onerror() в <amp-img>

Question

Есть ли способ использовать атрибут onerror в <amp-img>?

Это работало хорошо в HTML.

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

Но amp html создаст тег img внутри amp-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

Мы не можем использовать onerror приписывать amp-img но усилитель обеспечит 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>

Выход:

Теперь, если вы хотите показать любое изображение (например, no-image) вместо текста, когда исходное изображение не найдено, тогда установите фоновое изображение для отступного 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 - резервный режим в автономном режиме