如果html <img>的src属性无效，请input默认图片？
如果src属性无效（仅使用HTML），是否有任何方法在HTML <img>标记中呈现默认图像？ 如果不是的话，那么解决这个问题的方法是什么？
您要求提供HTML解决scheme
<!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> </head> <body> <object data="http://stackoverflow.com/does-not-exist.png" type="image/png"> <img src="https://appharbor.com/assetshttp://img.dovov.comstackoverflow-logo.png" /> </object> </body> </html>
这对我很好。 也许你想用JQuery来挂钩事件。
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">
更新与jacquargs错误后卫
更新：仅CSS解决scheme我最近看到Vitaly Friedman演示了一个很棒的CSS解决scheme，我不知道。 这个想法是将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或gobs的CSS。 如果你需要在不同的位置应用不同的图像，只需要区分一个类： .my-special-case img:before { ...
在Spring in Action 3rd Ed中find了这个解决scheme。
<img src="../resourceshttp://img.dovov.comImage1.jpg" onerror="this.src='../resourceshttp://img.dovov.comnone.jpg'" />
更新：这不是一个HTML唯一的解决scheme… onerror是JavaScript
<style type="text/css"> img { background-image: url('http://img.dovov.comdefault.png') } </style>
请确保input图像的尺寸，并确定图像是否平铺。
我不认为只使用HTML是可能的。 但是，使用JavaScript，这应该是可行的。 Bassicly我们循环每个图像，testing是否完整，如果它是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中testing
<img style="background-image: url(image1), url(image2);"></img>
如果你使用的是Angular / jQuery，那么这可能有帮助…
<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">
说明
假设这个item有一个可能为null的属性url ，那么这个图片就会显示为broken。 如上所述，触发onerror属性expression式的执行。 你需要重写上面描述的src属性，但是你需要jQuery来访问你的altSrc。 无法让它与香草JavaScript工作。
似乎有点哈克，但保存了我的项目的一天。
一个HTML解决scheme，唯一的要求是你知道你插入的图像的大小。 不能用于透明图像，因为它使用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
上面的解决scheme是不完整的 ，它错过了属性src。
this.src和this.attribute（'src'）是不一样的，第一个包含对图像的完整引用，例如http://my.host/error.jpg ，但是这个属性只保留原始值，error.jpg
正确的解决scheme
<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />
问候，
无法确定将尝试查看您的页面的无数客户端（浏览器）。 要考虑的一个方面是，电子邮件客户端实际上是Web浏览器，可能无法处理这种trickamajickery …
因此，你也应该包括一个默认宽度和高度的ALT /文本，就像这样。 这是一个纯粹的HTML解决scheme。
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 /文本是非常大的…
所以我的答案是使用Javascript与一个很好的ALT /文本后备。
我也发现这有趣： 如何设置图像的alt属性
使用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="..." />
angular2：
<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
一个简单的img元素不是很灵活，所以我把它与一个图片元素结合起来。 这种方式不需要CSS。 当发生错误时，所有srcset被设置为后备版本。 一个断开的链接图像没有显示出来。 它不会加载不需要的图像版本。 图片元素支持对浏览器不支持的types进行响应式devise和多种回退。
<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>
如果您使用的是Angular 1.x，则可以包含一个指令，使您可以回退到任意数量的图像。 fallback属性支持单个url，数组中的多个url或使用scope数据的angular度expression式：
<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度应用程序模块添加一个新的回退指令：
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); }); } }; }])
使用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"); } });
对于任何图像，只需使用这个JavaScript代码：
if (ptImage.naturalWidth == 0) ptImage.src = '../../../../icons/blank.png';
其中ptImage是由document.getElementById()获取的<img>标记地址。
Google把这个页面扔到了“image fallback html”这个关键字上，但是因为上面的这些帮助我，而且我正在寻找一个“9以下的IE的svg后备支持”，所以我一直在寻找，这就是我发现的：
<img src="base-image.svg" alt="picture" /> <!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->
这可能是脱离主题，但它解决了我自己的问题，也可能帮助别人。
;){kind=link}