Как заменить несуществующие изображения заполнителем при асинхронной загрузке из базы данных

Question

У меня есть база данных с изображениями, которые мне нужно загружать на лету по запросу пользователя. Изображения будут передаваться как фоновые изображения отдельных элементов в охватывающем контейнере div... что-то вроде скроллера изображений.

База данных в настоящее время является локальной базой данных, но это не моя проблема.

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

Есть ли стандартный и простой способ справиться с этим.. желательно без плагинов, так как у меня есть много, как есть...

Answer 1

Кажется, я не мог избежать необходимости создавать еще один элемент DOM. Вот что я сейчас использую:

<div style="background:url(providerSrc)">
<img
     style="display:none" 
       src="providerSrc"
   onerror="this.parentNode.style.backgroundImage='url(fallbackSrc)'"  
   />
</div>

Это взято из: http://www.daveoncode.com/2010/08/20/image-background-fallback-img-tag-error-handlers/

Если вы знаете "лучшее" решение, пожалуйста, ответьте

Answer 2

Что если вы поместите заполнитель в качестве фонового изображения позади исходного изображения? Если изображение существует, оно будет заполнять заполнитель. Если нет, то ничто не покрывает заполнитель, и это будет видно.