Загрузка резервного изображения в теге рисунка

Question

Я создаю галерею изображений со списком изображений, используя Angular 4.3.0.Изображения загружаются как фоновые изображения в тегах figure.Не в img тегах.Размер изображения уменьшается до меньшего размера, и они используются для заполнения галереи.Если изображение с измененным размером недоступно, используйте вариант загрузки исходного изображения.

Если исходное изображение недоступно, будет загружено no-image.png/jpg.Я видел решения, где угловая директива создается для обработки сбоя загрузки изображения в атрибуте src тегов img.В настоящее время я не могу изменить теги figure на теги img из-за ограничений по времени и дизайну.Я сделал следующее:

<figure [ngStyle]="{'background-image':
                      'url(' + resizedImages[i] + '), 
                       url(' + originalImages[i] + '), 
                       url(' + noImageUrl + ')'}" 
></figure>

Проблема в том, что если все 3 изображения доступны, все они загружены.Таким образом, если будет 20 изображений, будет 60 вызовов загрузки изображений.Чего я хочу добиться, так это загрузить исходное изображение и изображение без изображения, только если изображение с измененным размером недоступно.Точно так же, чтобы загрузить изображение без изображения, только если недоступно как измененное изображение, так и исходное изображение.

Answer 1

Мне удалось реализовать решение, которое использует технику, упомянутую в следующем посте, как указано @ AugustinR . как я могу проверить, существует ли изображение в папке ресурсов с помощью угла 4

Что я сделал, отфильтровал список изображений для доступности, используя эту технику, и использовал список отфильтрованных изображений в DOM для отображенияизображения.

Это сработало для меня.Рад слышать, если есть и лучший ответ.