如何在HTML文档中用JavaScript替换损坏的图像？

Question

我想知道如何用JavaScript代替src-property（或删除整个img-node），如果浏览器意识到，image-src-property之外的图像不存在（更多） ）。

例如：

<div id="foo">
   <img src="bar">
</div>

img-tag指向无处。在某些浏览器中，尤其是iE正在展示一个“无图像”的十字架。我更喜欢使用替代图像URL替换bar，或者使用 nbsp 替换img-node。

我找到了approach，这对我来说并不适用。

请建议我只使用PrototypeJS或原始JS（它是一个使用PrototypeJS的项目，我不想用其他框架重载它）。

Answer 1

只需为图像使用onerror处理程序，在处理程序内部删除节点或更改src：

<img src="..." id="img-1"
     onerror="document.getElementById('img-1').src='working image';">

或者替代：

<img src="..." id="img-1"
     onerror="document.getElementById('img-1').parentNode.removeChild(document.getElementById('img-1'));">

将它作为事件处理程序编写并将其附加到文档中的所有图像可能更好。