Question

我正在通过javascript加载图片：

myimage.src = "/mycontroller/mymethod";
myimage.alt = "image";
myimage.onload = function(){
    $('body').append(myimage);
};

但是，有些时候我的控制器方法应该返回错误，http状态为500。因此，内容类型将不再是image/png。将是文字。
有一种方法可以在加载图像时识别此错误，获取错误消息并显示警告吗？

Answer 1

如果不保证该方法成功，更好的解决方案是让您的方法返回加载图像或显示错误的Javascript代码。据我所知，没有办法判断图像的URL实际上是图像，还是文本数据。如果有人提供证明我错的答案，我会很高兴！

Answer 2

您可以使用图像的onError事件来告诉您是否存在有效的图像文件。

例如：

假设你有一个包含5个图像文件的目录：img1.jpg，img2.jpg，img3.jpg，img4.jpg和img5.jpg。

这是您的网页代码，用于更改每次单击图像时显示的图像：

[HTML]

<img id="image" onClick="changeImage();" onError="error();" src="img1.jpg" />

[JavaScript的]

var number = 1;
function changeImage() 
{
number++;
document.getElementById("image").src = "img" + number + ".jpg";
}

function error()
{
alert("This image does not exist");
}

通过此设置，当您第五次单击图像时，将触发图像标记的onError事件，您将调用显示错误消息的函数。让你知道文件，img6.jpg不存在。现在，有一些方法可以操作此事件来探索本地目录，但它在某些方面受到限制。如果它是一个赋予它的真/假值的实际属性，它将更有用，因此它可以用作测试条件。

由于它无法用作测试条件，因此您必须等到页面识别出错误并将其报告给您的脚本，这会在您使用基于时间的脚本时出现问题，例如使用setInterval。

希望这个答案有助于将来阅读这个问题的人，因为我的答案已经过了一年多了......

Javascript图像加载：获取错误状态

2 个答案: