如何使用<img>错误源作为<div>

Question

我想插入另一个带有onError函数的url。

'<div class="item"
style="content:url(https://itemimage.jpg)" alt="No Product Image" ></div>'

如果找不到图像或出现错误，我想在这里插入默认的div背景内容：url。

Answer 1

内容URL在CSS端，根本不会向JS端引发任何事件。onError的类似方法可以是这样的：

<div style="content:url(https://example.com/what.jpg)" alt="No Product Image" >
<img style="display: none" src="https://example.com/what.jpg" onerror="this.parentElement.style.content = 'url(https://placehold.it/300x300)'">
</div>

但是IMO用内容样式做div很奇怪，为什么不直接使用<img>呢。

Answer 2

对我来说，以下代码有效：

<div class="item" style="background-image: url('/images/bg.jpg'), url('/images/altbg.jpeg');"></div>

第一个图像"；bg.jpeg"；是我想要使用的背景图像，如果它不可用；"altbg.jpeg"；作为背景图像。例如，bg.jpeg可以是来自数据库的图像。