Загрузка резервного изображения в теге figure
Я создаю галерею изображений со списком изображений, используя Angular 4.3.0. Изображения загружаются как фоновые изображения в теги figure. Нет в тегах img. Размер списка изображений изменяется до меньшего размера, и они используются для заполнения галереи. Если изображение с измененным размером недоступно, вариант использования - загрузить исходное изображение.
Если исходный образ недоступен, будет загружен no-image.png/jpg. Я видел решения, в которых создается директива angular для обработки сбоя загрузки изображения в атрибуте src тегов img. В настоящий момент я не могу заменить теги figure на теги img из-за ограничений дизайна и времени. Я сделал следующее.
<figure [ngStyle] = "{'background-image':
'url(' + resizedImages[i] + '),
url(' + originalImages[i] + '),
url(' + noImageUrl + ')'}"
></figure>
Проблема в том, что если доступны все 3 изображения, они все загружаются. Итак, если есть 20 изображений, будет 60 вызовов загрузки изображений. Я хочу загрузить исходное изображение и изображение без изображения только в том случае, если изображение с измененным размером недоступно. Точно так же можно загрузить изображение без изображения, только если изображение с измененным размером и исходное изображение недоступны.
Конечно. Спасибо, что сообщили мне и отредактировали вопрос.
Вы пробовали использовать функцию? Как [ngStyle] = "getBgUrl ()"
На самом деле нет @AugustinR. Даже если мы используем функцию, есть ли способ проверить, доступно ли изображение в указанном месте?
Вы можете использовать трюк это.
@AugustinR Спасибо :). Я только что протестировал небольшой проект. Это очень полезно. Думаю, я смогу использовать это решение. Я попробую это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Мне удалось реализовать решение, использующее технику, упомянутую в следующем сообщении, как указано @AugustinR. как я могу проверить, существует ли изображение в папке с ресурсами, используя angular 4
Что я сделал, так это отфильтровал список изображений на предмет доступности с помощью этой техники и использовал список URL-адресов отфильтрованных изображений в DOM для отображения изображений.
У меня это сработало. Рад слышать, есть ли ответ получше.
Пожалуйста, прочтите При каких обстоятельствах я могу добавить к моему вопросу «срочно» или другие похожие фразы, чтобы получить более быстрые ответы? - вкратце, это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивно для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.