图像占位符
[英]Image Placeholder
问题描述
我已经使用背景颜色定义了图像标记，这样如果没有图像，颜色应该显示但仍然是破碎的图像图标显示如何删除它？
我不想通过添加jquery或任何框架使页面笨重，我也不能添加任何类型的div到图像，因为该网站几乎完成。
只用javascript找到答案
function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
7 个解决方案
解决方案1
54 已采纳 2012-01-24 13:17:23
你可以使用以下隐藏：
<img
src="my.png"
onerror="this.style.display='none'"
/>
如果未找到图像，则可以显示另一张图像：
<img src="my.png" onerror="this.src = 'image-not-found.png';" />
解决方案2
7 2013-02-11 19:08:44
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);"/>
解决方案3
4 2012-01-24 14:19:50
一个简单的解决方案是使用占位符空白图像。 这通常用于精灵，但我认为你也可以使用它。
你做的是，你创建一个启用透明度的1x1 px空白gif图像，将“src”属性指向blank.gif并通过css background-image属性给出图像。 因此，即使未找到背景图像，也不会显示断开的链接图像。
解决方案4
1 2012-01-24 13:18:09
这是某些浏览器的一个功能 - 据我所知，Firefox，Chrome和Safari在Internet Explorer显示损坏的图像图标时没有显示任何内容。 没有使用Javascript，我不相信你可以覆盖这种行为。
解决方案5
1
浏览器会打破图像图标。 这不是你可以在代码中改变的东西。 我想你会发现不同的浏览器处理丢失的图像的方式不同。
您想要做的事情可能会有不同的处理，但......
样式：
div.image-maybe-missing {
width: 300px;
height: 450px;
background-color: red;
background-image: url("/images/is-it-there.png");
}
HTML：
<div class="image-maybe-missing">
</div>
如果图像不存在，这将为您提供一个带红色背景的空框。 div的宽度和高度需要与图像的宽度和高度相匹配。
解决方案6
0 2017-08-10 13:50:08
尝试使用this.remove（）删除损坏的图像占位符：
<div class="cell">
<p>
<img src="pic.png" onerror="this.remove();" />
</p>
</div>
我使用单元格div来保留布局。
解决方案7
0 2012-01-24 13:17:33
这是一个依赖浏览器的行为，但你无法做任何事情。 这里有几个选项：
1）使用JavaScript向图像添加一个onerror处理程序，当它无法通过使用css隐藏设置时隐藏它（你需要有一个包含div来应用背景颜色，因为背景颜色不会显示图像是否为hdden）。
要在不使用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）在div上将图像设置为css背景图像，而不是使用<img>标签。 它不是语义，但如果加载失败则不会显示损坏的图像图标，您仍然可以指定背景颜色和标签（不是alt标签）。
使用图像作为复选框占位符
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.