从客户端检查图像是否存在答案

【问题标题】：checking image existance from client side从客户端检查图像是否存在
【发布时间】：2013-01-16 22:40:06
【问题描述】：

我正在开发一个图片库网站，将来可能会有数千张照片。所有图片均来自其他网站/API 或用户上传。

用户上传的图片

<img src="../images/example.jpg" alt="" />

外部图像

<img src="http://example.com/xyz.jpg" alt="" />

比方说，图片已从外部网站删除。有没有办法使用 jQuery / JavaScript 等从客户端检查照片是否存在？

我的想法

i) 我从外部网站热链接图像

ii) 图片从外部网站删除，当网站首次加载时，jquery 会使用 ajax 等将死链接信息发送给服务器

iii) 我会修复链接。

提前谢谢...

【问题讨论】：

whathaveyoutried.com
How to tell if dynamically loaded image exists的可能重复
error event listener，有人吗？
@JayBlanchard 我什么都没尝试。我不确定它是否可能来自客户端。但我知道从服务器端是可能的。

标签： javascript jquery file-exists

【解决方案1】：

您可以在外部图像上使用“onerror”事件并创建服务器端脚本来处理错误并在解决问题时返回通用的“找不到图像”图像。

类似...

onerror="this.src='/fiximage.php?q='+this.src;"

【讨论】：

【解决方案2】：

你可以做这样的事情......

$(function() {
    $(document).on("error", "img", function() {
        // do something with $(this) here
    });
});

这将检测损坏的图像并允许您对其进行处理。

【讨论】：

Archer，脚本检测外部网站是否重定向到其他unavailable.jpg并将图像发送回我的链接？
您无法检测到来自外部站点的重定向 - 这是不可能的。您可以在加载时检查文件名并查看它是否为unavailable.jpg，但如果更改了您的脚本将无法正常工作。

【解决方案3】：

在这种情况下，您可以使用onerror 事件。

var imgs = document.getElementsByTagName("img"),
    img, i = 0;
while (img = imgs[i++]) {
    img.onerror = function() {
        // just an example for error reporting
        Ajax.send("POST /image_error.php", {src:img.src});
        // change img src
        img.src = "images/error.jpg";
    };
}

【讨论】：