查看img的src是否存在答案

【问题标题】：see if src of img exists查看img的src是否存在
【发布时间】：2012-02-19 19:13:06
【问题描述】：

当我放置一个 img 标签时，我会动态创建 src 属性。有没有办法用javascript测试src（图像所在的路径）是否真的存在，以避免得到：

【问题讨论】：

您可能需要考虑使用服务器端脚本来检查这一点，因为浏览器可以禁用 javascript。
定义“实际存在”。由于跨域来源策略，您将无法检查浏览器使用 Javascript 从远程站点检索的图像，因此您所要求的可能是不可能的。您可以将 URL 发送到服务器并让它下载文件，但从安全角度来看，这是一个坏主意。
我找到了这篇文章。它应该可以帮助你。 irt.org/script/52.htm
我不知道为什么你们认为我这样做是错误的。我有一个放置常用图像扩展名的文件夹。例如，我有一个名为 pdf.png、txt.png、....等等的图像。我有最常见的，当用户上传文件时，我想显示他刚刚上传的文件的图像。只需知道文件扩展名就很容易构建img src。我知道我将能够在服务器端执行此操作，但这需要做很多工作。我会知道为所有未知的图像显示默认图像。非常感谢您的帮助！

【解决方案1】：

您可以使用error 事件：

var im = document.getElementById('imageID'); // or select based on classes
im.onerror = function(){
  // image not found or change src like this as default image:

   im.src = 'new path';
};

内联版本：

<img src="whatever" onError="this.src = 'new default path'" />

或者

<img src="whatever" onError="doSomething();" />

<img> 标签支持这些事件：

abort (onAbort)
error (onError)
load (onLoad)

更多信息：

【讨论】：

我在其他论坛看到，在IE下不行，对吗？
好的，谢谢！可能是更早的版本，谁知道 xD 谢谢。
当 new_default_path 不存在时会发生什么？会是无限循环吗？
我更喜欢以其他方式进行操作，这样 UI 就不会等到 onError 隐藏图像，从而导致损坏的 img 图标闪烁。 <img src="somephoto.png" style="visibility:hidden;" onload="this.style.visibility='visible'" />

【解决方案2】：

您可以进行先前的 ajax 调用（使用head 方法）并查看服务器返回码或者您可以使用onerror 事件来更改网址或使其隐藏，例如

<img src="notexist.jpg" onerror="this.style.visibility = 'hidden'">

（我使用内联属性只是为了解释这个想法）

【讨论】：

很棒的例子。像魅力一样工作。

【解决方案3】：

您以错误的方式处理此问题。
当您使用服务器端脚本生成链接时，请检查该文件是否存在（例如在 PHP 中使用 file_exists()）。

当你可以在服务器端使用 JavaScript 时，你不应该依赖它，因为 JavaScript 可以被更改和禁用。

问问自己你是如何生成src= 属性的，并在那里检查文件是否存在，并提供替代方案。

【讨论】：

这是非常主观的：“当你可以在服务器端做到这一点时，你不应该依赖 JavaScript”。我完全不同意，理由是完全错误的。并不是因为可以更改代码，用户才会有兴趣这样做。如果图像不存在，OP 可能只是想调整 Web 应用程序的样式。样式是在客户端域中的东西，而 IMO，它不应该出现在服务器端。例如，如果图像是需要验证才能显示的安全资源，您的观点将是有效的。

【解决方案4】：

如果您使用 javascript 动态创建 src，您可以使用：

var obj = new Image();
    obj.src = "http://www.javatpoint.com/images/javascript/javascript_logo.png";

if (obj.complete) {
    alert('worked');
} else {
    alert('doesnt work');
}

【讨论】：

该图像存在于以下路径中，但是当我运行代码 sn-p 时它显示“没有工作”。是因为“同源政策”吗？
这是因为，obj.complete 返回 false。代码立即执行。而状态还没有完成。所以它总是去 else 块