是否有一种跨浏览器方法可以测试 <img> 标签是否损坏且不需要内联事件处理程序？

问题描述 投票：0回答：1

我正在寻找一种方法来测试图像的src是否损坏，以便我可以用默认图像替换src。但是，我无法使用内联事件处理程序，例如“onerror”。

有谁知道一种不会造成跨浏览器不兼容的解决方法吗？

我尝试使用 javascript 事件处理程序来处理“错误”事件，但它没有触发。我认为这是因为错误事件在 javascript 事件侦听器放置在 img 上之前触发，但我不能肯定地说。

编辑：我相信我可能刚刚找到了一些可以提供为什么错误事件没有触发的线索的东西。服务器上确实存在有问题的图像文件，但它是一个空文件。简而言之，请求有效，但图像文件本身已损坏。即使收到的图像无效，有效的请求是否会导致图像不会触发错误事件？如果是这样，有没有办法检查是否发生了这种情况？

javascript html event-handling dom-events onerror
1个回答
1
投票

我为你所说的尝试过的解决方案做了一个快速且最小的模型，因为我不敢相信它不起作用。

我在 Vivaldi、Chrome、Firefox 和 Safari 中测试了它，它的工作原理与应有的一样。如果您做了与我的示例不同的事情，也许您可以详细说明。

我刚刚将 

error
EventListener 附加到 
img
元素，当无法加载图像时会调用该元素。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.