如果<img>属性无效（仅使用HTML），有没有办法在HTML src代码中呈现默认图片？如果没有，那么你的轻量级解决方法是什么？
答案 0 :(得分：278)
您要求仅限HTML 解决方案......
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Object Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>
<object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
<img src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="example">
</object>
</p>
</body>
</html>
由于第一张图像不存在，将显示后备（Stack Overflow徽标）。如果您使用的是不支持object的真正旧浏览器，它将忽略该标记并使用img标记。有关兼容性，请参阅caniuse网站。自2018年起，这个元素得到了ie6 +。
答案 1 :(得分：278)
这适合我。也许你想用JQuery挂钩事件。
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">
更新了jacquargs错误保护
更新：仅CSS解决方案
我最近看到Vitaly Friedman演示了一个我不知道的很棒的CSS解决方案。我们的想法是将content属性应用于损坏的图像。通常:after或:before不适用于图片，但是当它们被破坏时，它们就会被应用。
<img src="nothere.jpg">
<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 { ...
答案 2 :(得分：57)
在Spring in Action 3rd Ed。
中找到了这个解决方案 <img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />
<强>更新
这不是仅限HTML的解决方案... onerror是javascript
答案 3 :(得分：15)
<style type="text/css">
img {
background-image: url('/images/default.png')
}
</style>
请务必输入图像尺寸以及是否要图像平铺。
答案 4 :(得分：13)
我认为只使用HTML是不可能的。但是使用javascript这应该是可行的。 Bassicly我们遍历每个图像，测试它是否完整，如果它的naturalWidth是零那么这意味着它没有找到。这是代码：
fixBrokenImages = function( url ){
var img = document.getElementsByTagName('img');
var i=0, l=img.length;
for(;i<l;i++){
var t = img[i];
if(t.naturalWidth === 0){
//this image is broken
t.src = url;
}
}
}
像这样使用：
window.onload = function() {
fixBrokenImages('example.com/image.png');
}
在Chrome和Firefox中测试
答案 5 :(得分：12)
如果您正在使用Angular / jQuery，那么这可能会有所帮助......
<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">
<强>解释
假设item的属性url可能为null，那么当它出现时，图像将显示为已损坏。这会触发onerror属性表达式的执行，如上所述。您需要覆盖src属性，如上所述，但您需要jQuery来访问您的altSrc。无法使用vanilla JavaScript。
可能看起来有点hacky但是在我的项目上节省了一天。
答案 6 :(得分：11)
<img style="background-image: url(image1), url(image2);"></img>
使用可以添加多个图像的背景图像。 我的情况： image1是主图像，这将来自某个地方（浏览器做一个请求） image2是在加载image1时显示的默认本地图像。 如果image1返回任何类型的错误，用户将看不到任何更改，这将是干净的用户体验
答案 7 :(得分：7)
仅限HTML的解决方案，唯一的要求是您知道您要插入的图片的大小。不适用于透明图像，因为它使用background-image作为填充。
我们可以成功使用background-image链接在给定图像丢失时显示的图像。然后唯一的问题是破坏的图标图像 - 我们可以通过插入一个非常大的空字符来删除它，从而将内容推到img的显示之外。
img {
background-image: url("http://placehold.it/200x200");
overflow: hidden;
}
img:before {
content: " ";
font-size: 1000px;
}This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder
仅限CSS的解决方案（仅限Webkit）
img:before {
content: " ";
font-size: 1000px;
background-image: url("http://placehold.it/200x200");
display: block;
width: 200px;
height: 200px;
position: relative;
z-index: 0;
}This image is there:
<img src="http://placehold.it/100x100"/><br/>
This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder
或者，在jsfiddle：https://jsfiddle.net/xehndm3u/9/
答案 8 :(得分：6)
angular2：
<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
答案 9 :(得分：4)
一个简单的img-element不是很灵活，所以我把它与一个图片元素结合起来。这样就不需要CSS了。发生错误时，所有srcset都设置为回退版本。断开的链接图像未显示。它不会加载不需要的图像版本。 picture-element支持响应式设计和浏览器不支持的类型的多个回退。
<picture>
<source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
<source id="s2" srcset="image2_broken_link.png" type="image/png">
<img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>
答案 10 :(得分：4)
无法确定将尝试查看您网页的无数客户端（浏览器）。需要考虑的一个方面是电子邮件客户端是事实上的Web浏览器，可能无法处理这种棘手的问题......
因此，你应该包括一个带有DEFAULT WIDTH和HEIGHT的alt / text，就像这样。这是一个纯HTML解决方案。
alt="NO IMAGE" width="800" height="350"
所以其他好的答案会稍微修改如下：
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">
我在Chrome中遇到了对象标记的问题，但我想这也适用于此。
你可以进一步设置alt / text的样式非常大......
所以我的答案是使用带有很好的alt / text后备的Javascript。
答案 11 :(得分：3)
带有 JQuery 的可调版本，请在文件末尾添加：
<script>
$(function() {
$('img[data-src-error]').error(function() {
var o = $(this);
var errorSrc = o.attr('data-src-error');
if (o.attr('src') != errorSrc) {
o.attr('src', errorSrc);
}
});
});
</script>
和img标记：
<img src="..." data-src-error="..." />
答案 12 :(得分：3)
以上解决方案不完整，它错过了属性src。
this.src和this.attribute('src')不相同，第一个包含对图片的完整引用，例如http://my.host/error.jpg，但该属性只保留原始值{{1 }}
正确的解决方案
error.jpg答案 13 :(得分：2)
如果您使用的是Angular 1.x，则可以包含一个指令，允许您回退到任意数量的图像。 fallback属性支持单个url，数组内的多个url或使用范围数据的角度表达式：
<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />
向角度应用模块添加新的回退指令：
angular.module('app.services', [])
.directive('fallback', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var errorCount = 0;
// Hook the image element error event
angular.element(element).bind('error', function (err) {
var expressionFunc = $parse(attrs.fallback),
expressionResult,
imageUrl;
expressionResult = expressionFunc(scope);
if (typeof expressionResult === 'string') {
// The expression result is a string, use it as a url
imageUrl = expressionResult;
} else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
// The expression result is an array, grab an item from the array
// and use that as the image url
imageUrl = expressionResult[errorCount];
}
// Increment the error count so we can keep track
// of how many images we have tried
errorCount++;
angular.element(element).attr('src', imageUrl);
});
}
};
}])
答案 14 :(得分：1)
我最近不得不构建一个回退系统，其中包括任意数量的回退图像。这是我使用简单的JavaScript函数完成的方法。
HTML
<img src="some_image.tiff"
onerror="fallBackImg(this);"
data-fallIndex="1"
data-fallback1="some_image.png"
data-fallback2="some_image.jpg">
JavaScript
function fallBackImg(elem){
elem.onerror = null;
let index = +elem.dataset.fallIndex;
elem.src = elem.dataset[`fallback${index}`];
index++;
elem.dataset.fallbackindex = index;
}
我觉得这是处理许多后备图像的一种非常轻巧的方法。
答案 15 :(得分：0)
对于任何图片，只需使用此javascript代码：
if (ptImage.naturalWidth == 0)
ptImage.src = '../../../../icons/blank.png';
其中ptImage是由<img>获得的document.getElementById()代码地址。
答案 16 :(得分：0)
使用Jquery你可以这样做：
$(document).ready(function() {
if ($("img").attr("src") != null)
{
if ($("img").attr("src").toString() == "")
{
$("img").attr("src", "images/default.jpg");
}
}
else
{
$("img").attr("src", "images/default.jpg");
}
});
答案 17 :(得分：0)
<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->
这可能是偏离主题的，但它解决了我自己的问题，也可能对其他人有所帮助。
答案 18 :(得分：0)
除了Patrick's精彩的答案之外，对于那些正在寻找跨平台角度js解决方案的人，请点击此处：
<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
<!-- any html as a fallback -->
</object>
这是我正在尝试找到正确解决方案的插件：http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview
答案 19 :(得分：0)
简单利落的解决方案，其中包含一些好的答案和评论。
<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">
它甚至可以解决无限循环风险。
为我工作。
答案 20 :(得分：-2)
嘛!! 我发现这种方式很方便，检查图像的height属性为0，然后你可以用默认图像覆盖src属性： https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
image.setAttribute('src','../icons/<some_image>.png');
//check the height attribute.. if image is available then by default it will
//be 100 else 0
if(image.height == 0){
image.setAttribute('src','../icons/default.png');
}