JavaScript如何检查图像的src是否有效？

Question

我有这样一个东西：

document.getElementById('MyPicture').src = 'attempted.png';

如果客户端无法获取该资源，我想用以下内容替换它：

document.getElementById('MyPicture').src = 'error.png'

我知道可以在图片标签中使用onError=function()，但是我如何将ID传递给onError函数，以便我可以有一个通用的onError函数来更改任何错误图片的src？

- kiasecto

Answer 1

是的，你可以在图片元素上使用onerror事件，这个方法被广泛支持，例如：

var image = document.getElementById('MyPicture');
image.onerror = function () {
  alert('error loading ' + this.src);
  this.src = 'error.png'; // place your error.png image instead
};

image.src = 'non-existing.jpg';

检查一个例子这里。

- Christian C. Salvadó

Answer 2

将此内容放入图像标签中：

onError="image_error(this.id)"

该函数将图像的id传递给image_error函数...显然。

- kiasecto

Answer 3

添加 onError 属性确实是处理它的正确方式。在您的情况下，您可以添加类似以下内容：

var myPicture = document.getElementById('MyPicture');
myPicture.onError = errorHandler();

function errorHandler(msg,file_loc,line_num) {
  myPicture.src = 'http://www.google.com/intl/en_ALL/images/srpr/logo1w.png';
}

- Raul Agrait