blocks|key|1318149|text|简单的img元素不是很灵活，所以我把它和一个图片元素结合起来。这样就不需要CSS了。发生错误时，所有源集都设置为回退版本。未显示断开的链接图像。它不会加载不需要的镜像版本。图片元素支持响应式设计和浏览器不支持的类型的多个回退。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1318150|<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>|code-block|syntax|javascript|1318151|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

a simple img-element is not very flexible so i combined it with a picture-element. this way no CSS is needed. when an error occurs, all srcset's are set to the fallback version. a broken link image is not showing up. it does not load unneeded image versions. the picture-element supports responsive design and multiple fallbacks for types that are not supported by the browser.

<pre><code>&lt;picture&gt;
 &lt;source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp"&gt;
 &lt;source id="s2" srcset="image2_broken_link.png" type="image/png"&gt;
 &lt;img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;"&gt;
&lt;/picture&gt;
</code></pre>

blocks|key|1532868|text|<style+type="text/css">
img+{
+++background-image:+url('/images/default.png')
}
</style>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1532869|请确保输入图像的尺寸以及是否要平铺图像。|unstyled|1532870|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;style type="text/css"&gt;
img {
 background-image: url('/images/default.png')
}
&lt;/style&gt;
</code></pre>

Be sure to enter dimensions of image and whether you want the image to tile or not.

blocks|key|1533026|text|我认为仅仅使用HTML是不可能的。然而，使用javascript，这应该是可行的。最基本的是，我们遍历每个图像，测试它是否完整，如果它的naturalWidth是零，那么就意味着没有找到它。代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533027|fixBrokenImages+=+function(+url+){
++++var+img+=+document.getElementsByTagName('img');
++++var+i=0,+l=img.length;
++++for(;i<l;i%2B%2B){
++++++++var+t+=+img[i];
++++++++if(t.naturalWidth+===+0){
++++++++++++//this+image+is+broken
++++++++++++t.src+=+url;
++++++++}
++++}
}|code-block|syntax|javascript|1533028|像这样使用它：|1533029|+window.onload+=+function()+{
++++fixBrokenImages('example.com/image.png');
+}|1533030|在Chrome和Firefox中测试|1533031|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I don't think it is possible using just HTML. However using javascript this should be doable. Bassicly we loop over each image, test if it is complete and if it's naturalWidth is zero then that means that it not found. Here is the code:

<pre><code>fixBrokenImages = function( url ){
 var img = document.getElementsByTagName('img');
 var i=0, l=img.length;
 for(;i&lt;l;i++){
 var t = img[i];
 if(t.naturalWidth === 0){
 //this image is broken
 t.src = url;
 }
 }
}
</code></pre>

Use it like this:

<pre><code> window.onload = function() {
 fixBrokenImages('example.com/image.png');
 }
</code></pre>

Tested in Chrome and Firefox

blocks|key|1533285|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533286|<img+style="background-image:+url(image1),+url(image2);"></img>++++++++++++++++++++++++++++++++++++++++++++|code-block|syntax|javascript|1533287|1533288|使用可让您添加多个图像的背景图像。我的情况是:+image1是主图像，这将从某个地方(浏览器执行请求)获取image2是在加载image1时显示的默认本地图像。如果image1返回任何类型的错误，用户将看不到任何更改，这对于用户体验来说将是干净的|1533289|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img style="background-image: url(image1), url(image2);"&gt;&lt;/img&gt; </code></pre>
</div>
</div>


Use background image that let you add multiple images.
My case: 
 image1 is the main image, this will get from some place (browser doing a request)
 image2 is a default local image to show while image1 is being loaded.
If image1 returns any kind of error, the user won't see any change and this will be clean for user experience

blocks|key|1533652|text|简单和整洁的解决方案，包括一些好的答案和评论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533653|<img+src="foo.jpg"+onerror="this.src='error.jpg';this.onerror='';">|code-block|syntax|javascript|1533654|它甚至解决了无限循环风险。|1533655|对我很管用。|1533656|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Simple and neat solution involving some good answers and comment.

<pre><code>&lt;img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';"&gt;
</code></pre>

It even solve infinite loop risk.

Worked for me.

blocks|key|1317968|text|angular2：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1317969|<img+src="{{foo.url}}"+onerror="this.src='path/to/altimg.png'">|code-block|syntax|javascript|1317970|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

angular2: 

<pre><code>&lt;img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'"&gt;
</code></pre>

blocks|key|1317944|text|没有办法确定将尝试查看您的页面的客户端(浏览器)的数量。要考虑的一个方面是，电子邮件客户端实际上是web浏览器，可能不会处理这样的花招……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1317945|因此，您还应该包括具有默认宽度和高度的alt/text，如下所示。这是一个纯HTML解决方案。|1317946|alt="NO+IMAGE"+width="800"+height="350"|code-block|syntax|javascript|1317947|因此，另一个好的答案将被稍微修改如下：|1317948|<img+src="foo.jpg"+onerror="if+(this.src+!=+'error.jpg')+this.src+=+'error.jpg';"+alt="NO+IMAGE"+width="800"+height="350">|1317949|我对Chrome中的对象标签有问题，但我想这也适用于此。|1317950|您可以进一步将alt/text样式设置为非常大...|1317951|所以我的答案是使用Javascript和一个不错的alt/text回退。|1317952|我也发现这很有趣：How+to+style+an+image's+alt+attribute|offset|length|1317953|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16671428/how-to-style-an-images-alt-attribute^0|0|0|0|0|0|0|0|0|9|11|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$U|1D|V|1E|1|1F]]|A|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

There is no way to be sure the myriad number of clients (browsers) that will try to view your page. One aspect to consider is that email clients are defacto web browsers and may not handle such trickamajickery ...

As such you should ALSO include an alt/text with a DEFAULT WIDTH and HEIGHT, like this. This is a pure HTML solution.

<pre><code>alt="NO IMAGE" width="800" height="350"
</code></pre>

So the other good answer would be slightly modified as follows:

<pre><code>&lt;img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350"&gt;
</code></pre>

I had issues with the object tag in Chrome, but I would imagine this would apply to that as well.

You can further style the alt/text to be VERY BIG ...

So my answer is use Javascript with a nice alt/text fallback.

I also found this interesting: <a href="https://stackoverflow.com/questions/16671428/how-to-style-an-images-alt-attribute">How to style an image&#39;s alt attribute</a>

blocks|key|1318451|text|我最近不得不构建一个后备系统，其中包括任意数量的后备图像。下面是我如何使用一个简单的JavaScript函数完成此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1318452|HTML|1318453|<img+src="some_image.tiff"
++++onerror="fallBackImg(this);"
++++data-fallIndex="1"
++++data-fallback1="some_image.png"
++++data-fallback2="some_image.jpg">|code-block|syntax|javascript|1318454|JavaScript|1318455|function+fallBackImg(elem){
++++elem.onerror+=+null;
++++let+index+=+%2Belem.dataset.fallIndex;
++++elem.src+=+elem.dataset[`fallback${index}`];
++++index%2B%2B;
++++elem.dataset.fallbackindex+=+index;
}|1318456|我觉得这是一种非常轻量级的方式来处理许多备用图像。|1318457|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I recently had to build a fall back system which included any number of fallback images. Here's how I did it using a simple JavaScript function.

HTML

<pre><code>&lt;img src="some_image.tiff"
 onerror="fallBackImg(this);"
 data-fallIndex="1"
 data-fallback1="some_image.png"
 data-fallback2="some_image.jpg"&gt;
</code></pre>

JavaScript

<pre><code>function fallBackImg(elem){
 elem.onerror = null;
 let index = +elem.dataset.fallIndex;
 elem.src = elem.dataset[`fallback${index}`];
 index++;
 elem.dataset.fallbackindex = index;
}
</code></pre>

I feel like it's a pretty lightweight way of handling many fallback images.

blocks|key|1533395|text|如果您使用的是Angular+1.x，则可以包含一个指令，该指令允许您回退到任意数量的图像。fallback属性支持单个url、数组内的多个url或使用作用域数据的角度表达式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533396|<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"+/>|code-block|syntax|javascript|1533397|向您的angular应用程序模块添加一个新的回退指令：|1533398|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%2B%2B;
++++++++++++++++++++angular.element(element).attr('src',+imageUrl);
++++++++++++++++});
++++++++++++}
++++++++};
++++}])|1533399|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you are using Angular 1.x you can include a directive that will allow you to fallback to any number of images. The fallback attribute supports a single url, multiple urls inside an array, or an angular expression using scope data:

<pre><code>&lt;img ng-src="myFirstImage.png" fallback="'fallback1.png'" /&gt;
&lt;img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" /&gt;
&lt;img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" /&gt;
</code></pre>

Add a new fallback directive to your angular app module:

<pre><code>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' &amp;&amp; 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);
 });
 }
 };
 }])
</code></pre>

blocks|key|1317700|text|使用Jquery，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1317701|$(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");
++++}
});|code-block|syntax|javascript|1317702|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Using Jquery you could do something like this:

<pre><code>$(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");
 }
});
</code></pre>

blocks|key|1533087|text|对于任何图像，只需使用以下javascript代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533088|if+(ptImage.naturalWidth+==+0)
++++ptImage.src+=+'../../../../icons/blank.png';|code-block|syntax|javascript|1533089|其中ptImage是document.getElementById()获取的<img>标签地址。|offset|length|style|CODE|1533090|entityMap^0|0|0|2|7|A|P|12|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

For any image, just use this javascript code:

<pre><code>if (ptImage.naturalWidth == 0)
 ptImage.src = '../../../../icons/blank.png';
</code></pre>

where <code>ptImage</code> is a <code>&lt;img&gt;</code> tag address obtained by <code>document.getElementById()</code>.

blocks|key|1533457|text|谷歌把这个页面的关键字"image+fallback+html“去掉了，但因为上面没有一个关键字对我有帮助，而我在寻找一个"svg对IE低于9的后备支持”，我继续搜索，结果是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533458|<img+src="base-image.svg"+alt="picture"+/>
|code-block|syntax|javascript|1533459|这可能是离题的，但它解决了我自己的问题，也可能对其他人有帮助。|1533460|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Google threw out this page to the "image fallback html" keywords, but because non of the above helped me, and I was looking for a "svg fallback support for IE below 9", I kept on searching and this is what I found: 

<pre><code>&lt;img src="base-image.svg" alt="picture" /&gt;
&lt;!--[if (lte IE 8)|(!IE)]&gt;&lt;image src="fallback-image.png" alt="picture" /&gt;&lt;![endif]--&gt;
</code></pre>

It might be off-topic, but it resolved my own issue and it might help someone else too.

blocks|key|1533574|text|除了Patrick's精彩的回答之外，对于那些正在寻找跨平台angular+js解决方案的人来说，这里就是：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1533575|<object+type="image/png"+data-ng-attr-data="{{+url+%7C%7C+'data:'+}}">
++++
</object>|code-block|syntax|javascript|1533576|这是我试图找到正确解决方案的地方：http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview|1533577|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/980910/737915|1|http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview^0|2|9|0|0|0|H|1F|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

In addition to <a href="https://stackoverflow.com/a/980910/737915">Patrick's</a> brilliant answer, for those of you who are searching for a cross-platform angular js solution, here you go:

<pre><code>&lt;object type="image/png" data-ng-attr-data="{{ url || 'data:' }}"&gt;
 &lt;!-- any html as a fallback --&gt;
&lt;/object&gt;
</code></pre>

Here's a plunk where I was playing trying to find the right solution: <a href="http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview</a>

blocks|key|1533623|text|如果您已经创建了动态Web项目，并且已经在WebContent中放置了所需的图像，那么您可以在Spring+MVC中使用下面提到的代码来访问该图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533624|<img+src="Refresh.png"+alt="Refresh"+height="50"+width="50">|code-block|syntax|javascript|1533625|你也可以创建名为img的文件夹，将图片放在img文件夹中，并将img文件夹放在WebContent中，然后你可以使用下面提到的代码访问图片：|1533626|<img+src="img/Refresh.png"+alt="Refresh"+height="50"+width="50">|1533627|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you have created dynamic Web project and have placed the required image in WebContent then you can access the image by using below mentioned code in Spring MVC:

<pre><code>&lt;img src="Refresh.png" alt="Refresh" height="50" width="50"&gt;
</code></pre>

You can also create folder named img and place the image inside the folder img and place that img folder inside WebContent then you can access the image by using below mentioned code:

<pre><code>&lt;img src="img/Refresh.png" alt="Refresh" height="50" width="50"&gt;
</code></pre>

blocks|key|1533707|text|我将loading=“惰性”添加到img标签中。在某些情况下，它是有效的..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533708|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I am adding loading=&quot;lazy&quot; to img tag. In some cases it works..

blocks|key|1318503|text|下面是一个简单的Jquery，它对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1318504|++++++++$(image).on('error',+function(event)+{
++++++++++++imgage.attr('src',+'your_image.png');})|code-block|syntax|javascript|1318505|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

here is a simple Jquery that worked for me
<pre><code> $(image).on('error', function(event) {
 imgage.attr('src', 'your_image.png');})
</code></pre>

blocks|key|1318314|text|好了！！我发现这种方法很方便，检查图像的高度属性是否为0，然后可以用默认的图像覆盖src属性：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1318315|+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');
++}|code-block|syntax|javascript|1318316|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image^0|1B|1Z|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Well!!
I found this way convenient , check for the height attribute of image to be 0, then you can overwrite the src attribute with default image:
<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image</a>

<pre><code> image.setAttribute('src','../icons/&lt;some_image&gt;.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');
 }
</code></pre>

Is there any way to render a default image in an HTML <code>&lt;img&gt;</code> tag, in case the <code>src</code> attribute is invalid (using only HTML)? If not, what would be your lightweight way to work around it?

Inputting a default image in case the src attribute of an html <img> is not valid?

有没有办法在HTML标记中呈现默认图像，以防src属性无效(仅使用<img> )？如果没有，你会用什么轻量级的方式来解决这个问题呢？

问在html <img>的src属性无效的情况下输入默认图像？
EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html <img>的src属性无效的情况下输入默认图像？EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html <img>的src属性无效的情况下输入默认图像？
EN