从客户端检查图像是不是存在

Posted 2023-02-23

【中文标题】从客户端检查图像是不是存在

【英文标题】：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 我什么都没尝试。我不确定它是否可能来自客户端。但我知道从服务器端是可能的。

【参考方案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";
    ;