Javascript 图像占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8987428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image Placeholder
提问by Pradyumna Challa
I have defined the image tag with a background color so that if there is no image the color should show but still the broken image icon is showing how to remove that ?
我已经用背景颜色定义了图像标签，这样如果没有图像，颜色应该显示，但损坏的图像图标仍然显示如何删除它？
I dont want to make the page bulky by adding jquery or any framework , also i cant add any kind of divs to images because the site is almost done.
我不想通过添加 jquery 或任何框架来使页面变得庞大，而且我也无法向图像添加任何类型的 div，因为该站点几乎完成了。
Found the answer with only javascript
只用 javascript 找到了答案
function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
回答by Hemant Metalia
you can hide that using following:
您可以使用以下方法隐藏它：
<img
src="my.png"
onerror="this.style.display='none'"
/>
you can display another image if image not found as follow:
如果找不到图像，您可以显示另一张图像，如下所示：
<img src="my.png" onerror="this.src = 'image-not-found.png';" />
回答by Dmitry Skorinko
Solution with 1x1 empty png
1x1 空 png 的解决方案
function ImgError(source){
empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
source.src = "data:image/png;base64," + empty1x1png;
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
回答by Ege
A simple solution would be to use, literally, a placeholder blank image. This is generally used for sprites but I think you could use this as well.
一个简单的解决方案是使用占位符空白图像。这通常用于精灵，但我认为您也可以使用它。
What you do is, you create a 1x1 px blank gif image with transparency enabled, direct the "src" atrribute to the blank.gif and give the images via the css background-image property. Therefore, even if the background image is not found, it won't show the broken link image.
您要做的是，创建一个启用透明度的 1x1 像素空白 gif 图像，将“src”属性定向到 blank.gif 并通过 css background-image 属性提供图像。因此，即使没有找到背景图片，它也不会显示断开的链接图片。
回答by MassivePenguin
It's a feature of some browsers - as far as I can recall, Firefox, Chrome and Safari show nothing while Internet Explorer shows a broken image icon. Short of using Javascript, I don't believe you can override this behaviour.
这是某些浏览器的一个功能——据我所知，Firefox、Chrome 和 Safari 什么都不显示，而 Internet Explorer 显示损坏的图像图标。缺少使用 Javascript，我不相信您可以覆盖此行为。
回答by MassivePenguin
The browser does that broken image icon. It's not something you can change within the code. I think you'll find that the different browsers handle missing images differently.
浏览器会执行那个损坏的图像图标。这不是您可以在代码中更改的内容。我想你会发现不同的浏览器处理丢失图像的方式不同。
What you want to do could be handled differently, though...
但是，您可以以不同的方式处理您想要做的事情......
Style:
风格：
div.image-maybe-missing {
width: 300px;
height: 450px;
background-color: red;
background-image: url("/images/is-it-there.png");
}
HTML:
HTML：
<div class="image-maybe-missing">
</div>
This will give you an empty box with a red background if the image isn't present. The width and height of the div needs to match the width and height of the image.
如果图像不存在，这将为您提供一个带有红色背景的空框。div 的宽度和高度需要与图像的宽度和高度匹配。
回答by Nick Lockwood
That's a browser-dependent behaviour, but you can't do anything about it. Here are a couple of options:
这是一种依赖于浏览器的行为，但您对此无能为力。这里有几个选项：
1) Use JavaScript to add an onerror handler to the image that hides it when it fails to load by settings it to hidden using css (you'll need to have a containing div to apply the background color to as the background color won't show if the image is hdden).
1) 使用 JavaScript 向图像添加一个 onerror 处理程序，当它加载失败时，通过使用 css 将其设置为隐藏来隐藏它（您需要有一个包含 div 来应用背景颜色，因为背景颜色不会显示图像是否已高清）。
To apply an error handler to every image in the site without jQuery and without modifying the code, you can do this (put this in a script at the end of the page - it won't work if it's in the <head>and you can't put it in window.onload or it won't fire before the images have loaded).
要在网站申请一个错误处理每一个图像，而jQuery和不修改代码，你可以这样做（把这个脚本在页面的结束-它不会工作，如果它在<head>和你不能将它放在 window.onload 中，否则在图像加载之前它不会触发）。
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].onerror = function() {
this.style.visibility = 'hidden';
}
}
2) Set the image as the css background-image on a div instead of using an <img>tag. It's not as semantic, but it won't display a broken image icon if it fails to load, and you can still specify a background color and a label (not an alt tag).
2) 将图像设置为 div 上的 css 背景图像，而不是使用<img>标签。它没有语义，但如果加载失败，它不会显示损坏的图像图标，您仍然可以指定背景颜色和标签（不是 alt 标签）。
回答by MannyC
Try this.remove()to remove the broken image placeholder:
试试this.remove()删除损坏的图像占位符：
<div class="cell">
<p>
<img src="pic.png" onerror="this.remove();" />
</p>
</div>
I use cell divs to preserve layout.
我使用单元格 div 来保留布局。
