Как установить резервные изображения в полимере

Question

Я загружаю изображения динамически на основе данных элемента.Однако не у всех предметов есть изображение.При прокрутке dom-repeat я получаю много ошибок 404 Not (Found) в DevTools.

Как установить резервное изображение?

Существует ли способ предварительной выборки маршрута, чтобы проверить, действителен ли он перед отправкой запроса на получение, чтобы журнал не выдавал много ошибок?

<img id="img" src="[[item.src]]" onerror="dothis">

...

dothis() {
  console.log('do this');
  this.$.id.src = 'path/to/fallback.jpg';
}

Эта onerror функция записывает в журнал «Uncaught ReferenceError: dothis is not определена».

Answer 1

Я считаю, что есть событие с именем error-changed, которое сработает при изменении свойства ошибки.Таким образом, вы можете подключиться к этому и вызвать функцию, которая изменит ваш src на изображение по умолчанию.Взгляните на документацию с изображениями железа

Answer 2

onerror="dothis"

Вероятно, не работает, потому что вы пытаетесь связать метод вашего PolymerElement с обычным атрибутом события HTML, который не знает контекст вашего компонента (он ищет глобальный идентификатор с именем dothis)в отличие от того, что происходит с атрибутами Polymer on-* пользовательских элементов, которые недоступны в нативном элементе img.

. Для вашей цели вы можете рассмотреть возможность использования Polymer's iron-image: его свойство placeholder

может быть установлен на URL (предпочтительно URI данных для мгновенного рендеринга) для изображения-заполнителя

(из документация по железному изображению ).

<iron-image
    preload
    placeholder="./loading.png">
</iron-image>

preload гарантирует, что изображение заполнителя будет отображаться также между src изменениями и в случае сбоя.