我怎么能使用我自己的图像时,网站返回假图像与404响应代码
How can I use my own image when site returns fake image with a 404 response code
这是一个关于如何在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协议信息
我想为你提供一些关于套接字编程的东西,但是我不知道你使用的是哪种后端。
- Imgur API图像搜索未返回数据
- instafeed.js返回的居中图像
- 使用纯JavaScript返回并嵌入图像,如php
- html5 canvas toDataURL 返回空白图像
- 如何使用 HTML 图像请求将数据发送到服务器,或返回数据作为响应
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 使用从readAsDataURL()返回的图像数据
- 有没有一种方法可以判断图像src是否在javascript内部返回null
- 提交输入类型=“;图像“;到另一个servlet时,未能返回任何参数
- jquery裁剪图像selction未返回结果
- ajax 返回带有循环的图像长度,检查最后一个循环
- dojo/使用NodeJS请求一个png图像数组缓冲区,并将图像返回给客户端
- 当用户不进行交互时,如何使图像返回到屏幕顶部
- 图像返回到原始源OnClick
- 无法通过异步ajax调用呈现base64图像返回
- 使用Ajax预览图像:返回一个损坏的图像图标
- Blob图像返回空白图像
- javascript getImageData未从png图像返回正确的像素颜色
- 如何在单击时将图像返回到网站上的另一个位置
- 图像返回值“;空”;