回答(19)
2 years ago
你问过一个只有HTML的解决方案......
/p>
"http://www.w3.org/TR/html4/strict.dtd">
Object Test 
由于第一个图像没有使用不支持object的旧浏览器，因此它将忽略该标记并使用 img 标记 . 有关兼容性，请参见caniuse网站 . 截至2018年，这个元素得到了ie6的所有浏览器的广泛支持 .
2 years ago
这对我很有用 . 也许你想用JQuery挂钩事件 .
更新了jacquargs错误保护
Updated: CSS only solution 我最近看到Vitaly Friedman演示了一个我不知道的优秀CSS解决方案 . 我们的想法是将 content 属性应用于损坏的图像 . 通常 :after 或 :before 不适用于图像，但是当它们重新应用时're broken, they' .
img:before {
content: ' ';
display: block;
position: absolute;
height: 50px;
width: 50px;
background-image: url(ishere.jpg);
正如小提琴所示，破坏的图像本身并没有被删除，但这可能解决了大多数情况下没有任何JS也没有CSS的问题 . 如果您需要在不同位置应用不同的图像，只需区分一个类： .my-special-case img:before { ...
2 years ago
在Spring in Action 3rd Ed中找到了这个解决方案 .
Update: 这不是HTML唯一的解决方案... onerror 是javascript
2 years ago
img {
background-image: url('/images/default.png')
}
请务必输入图像尺寸以及是否要图像平铺 .
2 years ago
我认为只使用HTML是不可能的 . 但是使用javascript这应该是可行的 . Bassicly我们遍历每个图像，测试它是否完整，如果它的naturalWidth是零那么这意味着它没有找到 . 这是代码：
fixBrokenImages = function( url ){
var img = document.getElementsByTagName('img');
var i=0, l=img.length;
for(;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中测试过
2 years ago
If you're using Angular/jQuery then this might help...
Explanation
假设 item 的属性 url 可能为null，那么当它出现时，图像将显示为已损坏 . 这会触发 onerror 属性表达式的执行，如上所述 . 您需要覆盖 src 属性，如上所述，但您需要jQuery来访问您的altSrc . 无法使用vanilla JavaScript .
可能看起来有点hacky但是在我的项目上节省了一天 .
2 years ago
使用可以添加多个图像的背景图像 . 我的情况：image1是主图像，这将从某个地方获取(浏览器正在执行请求)image2是在加载image1时显示的默认本 Map 像 . 如果image1返回任何类型的错误，用户将看不到任何更改，这将是干净的用户体验
2 years ago
angular2：
2 years ago
仅限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:
And is displaying the placeholder
仅限CSS的解决方案(仅限Webkit)
img:before {
content: " ";
background-image: url("http://placehold.it/200x200");
display: block;
width: 200px;
height: 200px;
position: relative;
z-index: 0;
}
This image is there:
This image is missing:
And is displaying the placeholder
2 years ago
一个简单的img元素不是很灵活，所以我把它与一个图片元素结合起来 . 这样就不需要CSS了 . 发生错误时，所有srcset都设置为回退版本 . 断开的链接图像未显示 . 它不会加载不需要的图像版本 . picture-element支持响应式设计和浏览器不支持的类型的多个回退 .
2 years ago
无法确定将尝试查看您的页面的无数客户端(浏览器) . 需要考虑的一个方面是电子邮件客户端是事实上的网络浏览器，可能无法处理这种棘手的问题......
因此，你应该包括一个带有DEFAULT WIDTH和HEIGHT的alt / text，就像这样 . 这是一个纯HTML解决方案 .
alt="NO IMAGE" width="800" height="350"
所以另一个好的答案会稍微修改如下：
我在Chrome中遇到了对象标记的问题，但我想这也适用于此 .
你可以进一步设置alt / text样式非常大...
所以我的答案是使用带有很好的alt / text后备的Javascript .
2 years ago
一个带有 JQuery 的可调版本，在你的结尾加上这个文件：
$(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);
}
});
});
并在您的 img 标签上：
2 years ago
如果您使用的是Angular 1.x，则可以包含一个指令，允许您回退到任意数量的图像 . fallback属性支持单个url，数组内的多个url或使用范围数据的角度表达式：
向角度应用模块添加新的回退指令：
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);
});
}
};
}])
2 years ago
The above solution is incomplete ，它错过了属性 src .
this.src 和 this.attribute('src') 不相同，第一个包含对图像的完整引用，例如 http://my.host/error.jpg ，但该属性只保留原始值， error.jpg
正确的解决方案
2 years ago
使用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");
}
});
2 years ago
对于任何图像，只需使用此JavaScript代码：
if (ptImage.naturalWidth == 0)
ptImage.src = '../../../../icons/blank.png';
其中 ptImage 是 document.getElementById() 获得的 标记地址 .
2 years ago
谷歌把这个页面扔到了“图像后备html”关键字，但由于上述情况并非如此，我正在寻找“低于9”的“svg后备支持”，我继续搜索，这就是我发现的：
这可能是偏离主题的，但它解决了我自己的问题，也可能对其他人有所帮助 .
2 years ago
除了Patrick's精彩的答案，对于那些正在寻找跨平台角度js解决方案的人来说，在这里你去：
2 years ago
image.setAttribute('src','../icons/.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');
}
