看看img的src是否存在

Question

当我放置一个img标签时，我动态创建了src属性。有没有办法测试src（图像所在的路径）实际上是否存在javascript以避免获取：

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 Events
• jQuery's error

Answer 2

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

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

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

Answer 3

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

Answer 4

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

当您可以在服务器端执行此操作时，不应该依赖JavaScript，因为可以更改和禁用JavaScript。

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