有没有办法确定图像路径是否指向实际图像，即检测图像何时无法在 Javascript 中加载。
对于 Web 应用程序，我正在解析 xml 文件并从图像路径列表动态创建 HTML 图像。服务器上可能不再存在某些图像路径，因此我想通过检测哪些图像无法加载并删除该 HTML img 元素来优雅地失败。
注意JQuery解决方案将无法使用（老板不想使用JQuery，是的我知道不要让我开始）。我知道在 JQuery 中检测图像何时加载的一种方法，但不知道它是否失败。
我创建 img 元素的代码，但如何检测 img 路径是否导致加载图像失败？
var imgObj = new Image(); // document.createElement("img");
imgObj.src = src;
你可以试试下面的代码。不过，我不能保证浏览器的兼容性，因此您必须对其进行测试。
function testImage(URL) {
var tester=new Image();
tester.onload=imageFound;
tester.onerror=imageNotFound;
tester.src=URL;
}
function imageFound() {
alert('That image is found and loaded');
}
function imageNotFound() {
alert('That image was not found.');
}
testImage("http://foo.com/bar.jpg");
我对抗 jQuery 的老板表示同情！
答案很好，但它引入了一个问题。每当您分配onload或onerror直接分配时，它可能会替换之前分配的回调。这就是为什么有一个很好的方法可以“在它被调用的 EventTarget 上注册指定的侦听器”，正如他们在MDN上所说的那样。您可以在同一事件上注册任意数量的侦听器。
让我稍微重写一下答案。
function testImage(url) {
var tester = new Image();
tester.addEventListener('load', imageFound);
tester.addEventListener('error', imageNotFound);
tester.src = url;
}
function imageFound() {
alert('That image is found and loaded');
}
function imageNotFound() {
alert('That image was not found.');
}
testImage("http://foo.com/bar.jpg");
因为外部资源加载过程是异步的，所以使用带有 promise 的现代 JavaScript 会更好，如下所示。
function testImage(url) {
// Define the promise
const imgPromise = new Promise(function imgPromise(resolve, reject) {
// Create the image
const imgElement = new Image();
// When image is loaded, resolve the promise
imgElement.addEventListener('load', function imgOnLoad() {
resolve(this);
});
// When there's an error during load, reject the promise
imgElement.addEventListener('error', function imgOnError() {
reject();
})
// Assign URL
imgElement.src = url;
});
return imgPromise;
}
testImage("http://foo.com/bar.jpg").then(
function fulfilled(img) {
console.log('That image is found and loaded', img);
},
function rejected() {
console.log('That image was not found');
}
);
这：
<img onerror="this.src='/images/image.png'" src="...">
/**
* Tests image load.
* @param {String} url
* @returns {Promise}
*/
function testImageUrl(url) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.addEventListener('load', resolve);
image.addEventListener('error', reject);
image.src = url;
});
}
return testImageUrl(imageUrl).then(function imageLoaded(e) {
return imageUrl;
})
.catch(function imageFailed(e) {
return defaultImageUrl;
});
使用 jQuery，这对我有用：
$('img').error(function() {
$(this).attr('src', '/no-img.png').addClass('no-img');
});
我可以在我的网站上的任何地方使用这张图片，无论它的大小如何，使用以下 CSS3 属性：
img.no-img {
object-fit: cover;
object-position: 50% 50%;
}
提示 1：使用至少 800 x 800 像素的方形图像。
提示2：用于人物肖像，使用
object-position: 20% 50%;
对于缺少的背景图像，我还在每个background-image声明中添加了以下内容：
background-image: url('path-to-image.png'), url('no-img.png');
注意：不适用于透明图像。
另一种解决方案是在发送到浏览器之前使用 Apache 检测丢失的图像，并将其替换为默认的 no-img.png 内容。
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]