提问人：dpiracini 提问时间：11/16/2023 最后编辑：dpiracini 更新时间：11/17/2023 访问量：30
是否有一种跨浏览器方法来测试不需要内联事件处理程序的 <img> 标记是否损坏？
Is there a cross-browser method for testing if an <img> tag is broken that doesn't require an inline event handler?
问：
我正在寻找一种方法来测试图像的 src 是否损坏，以便我可以用默认图像替换 src。但是，我不能使用内联事件处理程序，例如“onerror”。
有谁知道一种不会造成跨浏览器不兼容的解决方法？
我尝试将 javascript 事件处理程序用于“错误”事件，但它没有触发。我认为这是因为在将 javascript 事件侦听器放置在 img 上之前触发了错误事件，但我不能肯定地说。
编辑：我相信我可能只是找到了一些东西，可以提供关于为什么错误事件没有触发的线索。有问题的图像文件确实存在于服务器上，但是一个空文件。简而言之，请求是有效的，但图像文件本身已损坏。即使收到的图像无效，有效请求是否会导致图像不触发错误事件？如果是这样，有没有办法检查是否发生了这种情况？
答：
1赞
MikO
11/17/2023
#1
我为你说你尝试过的解决方案做了一个快速而最小的模型，因为我不敢相信它不起作用。
我在 Vivaldi、Chrome、Firefox 和 Safari 中对其进行了测试，它运行正常。也许你可以详细说明，如果你做了一些与我的例子不同的事情。
我刚刚将 EventListener 附加到元素，当无法加载图像时会调用该元素。errorimg
const fallbackImage = "https://images.unsplash.com/photo-1699190375905-3cac33bbdbb1";
const image = document.querySelector("#img");
image.addEventListener("error", event => {
console.log(`image could not be loaded, setting 'fallbackImage'...`);
event.target.src = fallbackImage;
});img {
max-width: 100%;
}<!DOCTYPE html>
<html>
<img src="https://images.unsplash.com/photo-1683009427051-00a2fe827a2c_" id=img />评论
0赞
dpiracini
11/17/2023
我做了一些挖掘，发现了一些东西，可以更清楚地说明为什么错误事件处理程序不起作用。我把它包含在上面的编辑中。
0赞
MikO
11/17/2023
如果图像损坏，则必须检查图像数据客户端。例如，将事物绘制到画布元素上并检查单个像素，或者检查图像的二进制数据并解析格式标头等。
评论
Picture