查看图片的src是否存在

Question

当我动态创建img标签的src属性时，有没有一种方法可以使用JavaScript测试src（图像所在的路径）是否实际存在，以避免出现以下情况：

- Tono Nam

---

您可能需要考虑使用服务器端脚本来检查此项，因为浏览器可能已禁用JavaScript。 - rogerlsmith

定义“实际存在”。由于跨域原则，您将无法使用Javascript检查浏览器从远程站点检索的图像，因此您所要求的可能是不可能的。您可以将URL发送到服务器并让其下载文件，但从安全角度来看，这是一个糟糕的想法。 - Borealid

我找到了这篇文章，它应该会对您有所帮助。http://www.irt.org/script/52.htm - Hector Sanchez

我不知道为什么你们认为我做错了。我有一个文件夹，里面放置着常见的图像扩展名。例如，我有一个名为pdf.png、txt.png等等的图像。我拥有最常见的扩展名，当用户上传文件时，我想显示他刚刚上传的文件的图像。只要知道文件扩展名，构造img src就非常容易。我知道我可以在服务器端完成这个任务，但这需要太多的工作。对于所有未知的图像，我将显示默认图像。非常感谢您的帮助！ - Tono Nam

Answer 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）

更多信息：

• JavaScript 事件
• jQuery 的 error

- Sarfraz

---

我在其他论坛上看到，它在IE中不起作用，这是正确的吗？ - Hector Sanchez

好的，谢谢！可能是早期版本，谁知道呢 xD 谢谢。 - Hector Sanchez

如果new_default_path不存在会发生什么？这会导致无限循环吗？ - sasjaq

我更喜欢用另一种方式来做，这样UI就不会等到onError才隐藏图像，从而导致损坏的图标闪烁。 <img src="somephoto.png" style="visibility:hidden;" onload="this.style.visibility='visible'" /> - tropicalfish

Answer 2

您可以通过使用head方法进行先前的 AJAX 调用，并查看服务器返回代码， 或者您可以使用onerror事件更改网址或将其隐藏，例如：

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

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

- Fabrizio Calderan

---

绝妙的例子。完美运行。 - tj-recess

Answer 3

如果您使用JavaScript动态创建src，则可以使用以下代码：

如果您使用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');
}

- Alexandre Strapacao G. Vianna

---

该图像存在于以下路径中，但当我运行代码片段时它显示“no worky”。这是因为“同源策略”吗？ - Yigitalp Ertem

这是因为 obj.complete 返回 false。代码立即执行，而状态尚未完全完成。因此它总是进入 else 块。 - Mohamed Allal

Answer 4

简单易懂

var x = new XMLHttpRequest(); x.open("get", "your_url.com/image.ext or /image.png or image.jpg", true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();

- Devmyselz

Answer 5

你的方法是错误的。
当使用服务器端脚本生成链接时，应该在那里检查文件是否存在（例如，在PHP中使用file_exists()）。

当你可以在服务器端执行操作时，不应依赖JavaScript，因为JavaScript可能会被更改和禁用。

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

- Madara's Ghost

---

这是非常主观的观点：“当你可以在服务器端完成时，就不应该依赖JavaScript”。我完全不同意，而且理由是错误的。并不是因为代码可以被更改，用户就有兴趣这样做。如果图片不存在，OP可能只想调整Web应用程序的样式。样式是客户端领域的东西，在我的看法中，它永远不应该出现在服务器端。例如，如果图像是需要身份验证才能显示的受保护资源，则您的观点将是有效的。 - nimai