如何在从数据库异步加载时用占位符替换不存在的图像

How to replace nonexistent images with a placeholder in asynchronous loading from database

本文关键字：占位符 替换 不存在 图像 加载 数据库 异步      更新时间：2023-09-26

我有一个包含图像的数据库，我需要根据用户的请求即时加载图像。 这些图像将作为包含div 容器中单独 s 的背景图像......类似于图像滚动器的东西。

该数据库当前是本地数据库，但这不是我的问题。

问题是数据库可能没有我请求的所有图像......我可能会得到一张或多张不存在的图像...... 而且由于数据库前端和加载图像方面的事情都是异步的，因此我不确定如何用标准占位符图像替换不存在的图像。 我无法在循环中即时执行此操作，因为它甚至在加载发生之前就执行了。我尝试使用 .加载和 .error，但我不确定如何在背景图像上做到这一点。

有没有一种标准和简单的方法来解决这个问题..最好没有插件，因为我有很多插件......

看来我无法摆脱创建另一个 DOM elem。 这是我现在使用的：

<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/

如果您知道"更好"的解决方案，请回复

如果将

占位符作为背景图像放在原始图像后面怎么办？如果图像存在，它将覆盖占位符。如果没有，则不会覆盖占位符，它将可见。

相关文章：