是否有任何方法在HTML <img>标记中呈现默认图像，以防src属性无效(仅使用HTML)?如果不是，你会用什么轻量级的方式来解决这个问题?
当前回答
我添加加载="lazy"到img标签。在某些情况下，它是有效的。
其他回答
只有HTML的解决方案，其中唯一的要求是你知道你插入的图像的大小。将不工作于透明图像，因为它使用背景图像作为填充。
我们可以成功地使用background-image来链接给定图像缺失时出现的图像。然后唯一的问题是破碎的图标图像-我们可以通过插入一个非常大的空字符来删除它，从而将内容推到img的显示之外。
img { 背景图片:url(“http://placehold.it/200x200”); 溢出:隐藏; ｝ img:{之前 内容:“”; 字体大小:1000 px; ｝ 这张图片缺失了: <img src="a.jpg" style="width: 200px;身高:200 px " / > < br / > 并且正在显示占位符
只有CSS的解决方案(只有Webkit)
img:{之前 内容:“”; 字体大小:1000 px; 背景图片:url(“http://placehold.it/200x200”); 显示:块; 宽度:200 px; 身高:200 px; 位置:相对; z - index: 0; margin-bottom: -16 px; ｝ 这张照片就在那里: < img src = " http://placehold.it/100x100 " / > < br / > 这张图片缺失了: < img src = " a.jpg " / > < br / > 并且正在显示占位符
这对我来说很有效。也许你想用JQuery来挂钩事件。
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="add alternative text here">
更新了jacquargs错误保护
更新:CSS唯一的解决方案 我最近看到Vitaly Friedman演示了一个我不知道的很棒的CSS解决方案。其思想是将内容属性应用于破碎的图像。通常:after或:before不应用于图像，但当它们被破坏时，它们就会被应用。
<img src="nothere.jpg" alt="add alternative text here">
<style>
img:before {
content: ' ';
display: block;
position: absolute;
height: 50px;
width: 50px;
background-image: url(ishere.jpg);
}
</style>
演示:https://jsfiddle.net/uz2gmh2k/2/
正如提琴所示，破碎的图像本身并没有被删除，但这可能会解决大多数情况下没有任何JS或CSS的问题。如果你需要在不同的位置应用不同的图像，只需用一个类进行区分:.my-special-case img:before{…
更新:2022年(chrome仍然工作!!)
我最近不得不构建一个包括任意数量的备份映像的备份系统。下面是我如何使用一个简单的JavaScript函数做到这一点。
HTML
<img src="some_image.tiff"
onerror="fallBackImg(this);"
data-src-1="some_image.png"
data-src-2="another_image.jpg">
JavaScript
function fallBackImg(elem){
elem.error = null;
let index = elem.dataset.fallIndex || 1;
elem.src = elem.dataset[`src-${index}`];
elem.dataset.fallIndex = ++index;
}
我觉得这是处理许多备用图像的一种非常轻量级的方式。
如果你想要“HTML only”，那么这个
<img src="some_image.tiff"
onerror="this.error = null;
let i = this.dataset.i || 1;
this.src = this.dataset[`src-${i}`];
this.dataset.i = ++i;"
data-src-1="some_image.png"
data-src-2="another_image.jpg">
3个解决方案:
考虑以下html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="imageId">
<script src="setimage.js"></script>
</body>
</html>
解决方案一: 在html的body标签中引用这段JS代码为 < script src = " setimage.js " > < /脚本> 并设置SRC路径，第一个是如果有错误，下一个是你希望第一次工作的路径:)
var img = document.getElementById("imageId")
img.onerror = () => {
img.src= "../error.png";
}
img.src= "../correct.webp.png";
解决方案二:
这个解决方案几乎是相同的，相反，您将调用方法，同样是在脚本标记的正文的末尾，但将在那里提供路径。
function setImageWithFallback(mainImgPath, secondaryImgPath) {
var img = document.getElementById("imageId")
img.onerror = () => {
img.src= mainImgPath;
}
img.src= secondaryImgPath;
}
解决方案三: 如果它只是一张图片，这将是最简单的:)只是在img标签上设置onerror
<img id="imageId" src="../correct.webp.png"
onerror="if (this.src != '../error.png') this.src = '../error.png';">
<style type="text/css">
img {
background-image: url('/images/default.png')
}
</style>
请务必输入图像的尺寸，以及是否希望图像平铺。
