我怎么能使用我自己的图像时,网站返回假图像与404响应代码

How can I use my own image when site returns fake image with a 404 response code

本文关键字:图像 返回 代码 响应 网站 怎么能 我自己 自己的      更新时间:2023-09-26

这是一个关于如何在javascript中优雅地处理破碎图像的常见问题。

我已经在图像上有一个onerror处理程序,将其替换为自定义的"image not found"图像。

然而,有一个网站,当你请求他们的图像时,返回404响应代码,但在响应体中实际上返回一个图像与他们自己的自定义未找到的图像。显然,在这种情况下img onerror事件不会触发,因为尽管有错误代码,仍然有图像。(我在FireFox、IE8和Chrome上测试过)

下面是所讨论的图像的示例:http://images.cars.com/preview/DMI/186445/C2121.jpg

有没有人对如何在javascript中检测这种情况和替换他们的动态404图像与我们自己的任何想法?谢谢!

想到的一个简单的解决方案是不立即加载图像,然后在文档中使用javascript。准备好了。Onload获取图像。然后,如果状态为404,将自己的noImageAvailable.png放入图像中。如果你得到200或其他OK状态,把接收到的图像放在那里。然而,这有一个问题。

同源策略不允许脚本跨域访问内容。因此,您不能简单地使用javascript来获取该文件。这里有几个变通方法,我将在这里解释其中一个(不一定是最好的,只是一个选择)。

这个方法的好处是javascript可以请求一个文件,并显示结果。缺点是后端代码更多。只需让javascript从服务器请求图像(AJAX),并将结果插入img。在此请求的服务器端,打开一个TCP套接字到托管映像的服务器(您必须解析IP地址),并为该映像发送HTTP GET请求。如果图像返回正常,则将其作为响应发送给AJAX。如果没有,请将自己的noImageAvailable.png发回。

由于这可能需要一些时间,因此您可能希望首先将图像替换为默认的"正在加载"图像,直到AJAX返回。

AJAX教程

HTTP协议信息

我想为你提供一些关于套接字编程的东西,但是我不知道你使用的是哪种后端。