blocks|key|2012006|text|您可以使用JavaScript中的onerror事件在图像加载失败时执行操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2012007|var+img+=+document.getElementById("myImg");
img.onerror+=+function+()+{+
++++this.style.display+=+"none";
}|code-block|syntax|javascript|2012008|在jQuery中(既然你问了)：|2012009|$("#myImg").error(function+()+{+
++++$(this).hide();+
});|2012010|或者对于所有图像：|2012011|$("img").error(function+()+{+
++++$(this).hide();
++++//+or+$(this).css({visibility:"hidden"});+
});|2012012|如果隐藏图像可能会更改布局，则应使用visibility:+hidden而不是.hide()。web上的许多站点使用默认的“无图像”图像，当指定的图像位置不可用时，将src属性指向该图像。|2012013|entityMap^0|H|7|0|0|0|0|0|0|I|I|13|7|2B|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|V|$]]

You can use the <code>onerror</code> event in JavaScript to act when an image fails to load:

<pre><code>var img = document.getElementById("myImg");
img.onerror = function () { 
 this.style.display = "none";
}
</code></pre>

In jQuery (since you asked):

<pre><code>$("#myImg").error(function () { 
 $(this).hide(); 
});
</code></pre>

Or for all images:

<pre><code>$("img").error(function () { 
 $(this).hide();
 // or $(this).css({visibility:"hidden"}); 
});
</code></pre>

You should use <code>visibility: hidden</code> instead of <code>.hide()</code> if hiding the images might change the layout. Many sites on the web use a default "no image" image instead, pointing the <code>src</code> attribute to that image when the specified image location is unavailable.

blocks|key|1798335|text|<img+onerror='this.style.display+=+"none"'>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1798336|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;img onerror='this.style.display = "none"'&gt;
</code></pre>

blocks|key|2012551|text|我稍微修改了Gary+Willoughby建议的解决方案，因为它简单地显示了破碎的图像图标。我的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2012552|++++<img+src="..."+style="display:+none"+onload="this.style.display=''">|code-block|syntax|javascript|2012553|在我的解决方案中，图像最初是隐藏的，只有在成功加载时才会显示。它有一个缺点:用户看不到半身化的图像。如果用户禁用了JS，那么他们将永远不会看到任何图像|2012554|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|$]]

I've slightly modified the solution suggested by Gary Willoughby, because it briefly shows the broken image icon. My solution:

<pre><code> &lt;img src="..." style="display: none" onload="this.style.display=''"&gt;
</code></pre>

In my solution image is hidden initially and is shown only when it is successfully loaded. It has a disadvantage: users will not see halfloaded images. And if user has disabled JS then they will never see any images

blocks|key|1798656|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1798657|(function()+{
++++var+allimgs+=+document.images;
++++for+(var+i+=+0;+i+<+allimgs.length;+i%2B%2B)+{
++++++++allimgs[i].onerror+=+function()+{
++++++++++++this.style.visibility+=+"hidden";+//+Other+elements+aren't+affected.+
++++++++}
++++}
})();|code-block|syntax|javascript|1798658|entityMap^0|0|0^^$0|@$1|2|3|-4|4|5|6|H|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|I|7|@]|8|@]|9|$D|E]]|$1|F|3|-4|4|5|6|J|7|@]|8|@]|9|$]]]|G|$]]

To hide every image error, just add this JavaScript at the bottom of your page (just before the closing body tag):

<pre><code>(function() {
 var allimgs = document.images;
 for (var i = 0; i &lt; allimgs.length; i++) {
 allimgs[i].onerror = function() {
 this.style.visibility = "hidden"; // Other elements aren't affected. 
 }
 }
})();
</code></pre>

blocks|key|2012471|text|现在回答可能有点晚了，但这是我的尝试。当我遇到同样的问题时，我使用了一个和image一样大小的div来修复这个问题&将background-image设置为这个div。如果找不到图像，则div将呈现为透明，因此无需java-script代码即可完成所有操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2012472|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|$]]

It may be little late to answer, but here is my attempt.
When I faced the same issue I fixed it by using a div of the size of image &amp; setting background-image to this div. If the image is not found, the div is rendered transparent, so its all done silently without java-script code.

blocks|key|1798783|text|我已经找到了一个很好的方法来做这件事，同时在Angular.js和like中使用ng-src指令时仍然是有效的……|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1798784|<img
++ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}"+
++onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
++/>|code-block|syntax|javascript|1798785|它基本上是一个最短的透明GIF+(如http://proger.i-forge.net/%25D0%259A%25D0%25BE%25D0%25BC%25D0%25BF%25D1%258C%25D1%258E%25D1%2582%25D0%25B5%25D1%2580/[20121112]%2520The%2520smallest%2520transparent%2520pixel.html所示)|1798786|当然，这个gif可以保存在某个全局变量中，这样就不会弄乱模板。|1798787|<script>
++window.fallbackGif+=+"..."
</script>|1798788|并使用|1798789|<img
++ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}"+
++onerror="this.src=fallbackGif"
++/>|1798790|等。|1798791|entityMap|0|LINK|mutability|MUTABLE|url|http://proger.i-forge.net/%25D0%259A%25D0%25BE%25D0%25BC%25D0%25BF%25D1%258C%25D1%258E%25D1%2582%25D0%25B5%25D1%2580/[20121112]%2520The%2520smallest%2520transparent%2520pixel.html^0|14|6|0|0|I|3R|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|M|3|N|5|6|7|1C|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1E|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|6|7|1G|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

i've found a nifty method to do exactly this, while being still functional when using <code>ng-src</code> directive in Angular.js and like...

<pre><code>&lt;img
 ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
 onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
 /&gt;
</code></pre>

it's basically a shortest transparent GIF (as seen
<a href="http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html" rel="nofollow">http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html</a> )

of course this gif could be kept inside some global variable so it won't mess up the templates.

<pre><code>&lt;script&gt;
 window.fallbackGif = "..."
&lt;/script&gt;
</code></pre>

and use

<pre><code>&lt;img
 ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
 onerror="this.src=fallbackGif"
 /&gt;
</code></pre>

etc.

blocks|key|1798886|text|只需在<img>上添加空白alt属性即可|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1798887|如下所示：<img+src="..."+alt="">|1798888|entityMap^0|3|5|D|3|0|5|M|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Just simply add blank <code>alt</code> attribute on your <code>&lt;img&gt;</code>
Something like this: <code>&lt;img src=&quot;...&quot; alt=&quot;&quot;&gt;</code>

blocks|key|1798863|text|只需使用简单的css|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1798864|.AdminImageHolder+{
display:+inline-block;
min-width:+100px;
max-width:+100px;
min-height:+100px;
max-height:+100px;
background:+url(img/100x100.png)+no-repeat;
border:+1px+solid+#ccc;
}|code-block|syntax|javascript|1798865|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|$]]

Just Use simple css

<pre><code>.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}
</code></pre>

Do you know how to hide the classic “Image not found” icon from a rendered HTML page when an image file is not found?

Any working method using JavaScript/jQuery/CSS?

How to silently hide "Image not found" icon when src source image is not found

您是否知道当未找到图像文件时，如何在呈现的HTML页面中隐藏经典的“找不到图像”图标？有没有使用JavaScript/jQuery/CSS的工作方法？

问如何在找不到源镜像时静默隐藏“找不到镜像”图标
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在找不到源镜像时静默隐藏“找不到镜像”图标EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在找不到源镜像时静默隐藏“找不到镜像”图标
EN