图片占位符答案

【问题标题】：Image Placeholder图片占位符
【发布时间】：2012-02-17 17:38:11
【问题描述】：

我已经定义了带有背景颜色的图像标签，这样如果没有图像，颜色应该显示，但损坏的图像图标仍然显示如何删除它？

我不想通过添加 jquery 或任何框架来使页面变得庞大，我也不能向图像添加任何类型的 div，因为该网站快完成了。

只用javascript找到答案

function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}

<img src="someimage.png" onerror="ImgError(this);"/>

【问题讨论】：

您可以分配 alt 属性，例如<img src="http://www.dummy.com/dummy.png" alt="my cute cat" /> 然后替代文本将与您应用的背景颜色一起出现。

标签： javascript html css image

【解决方案1】：

您可以使用以下方法隐藏它：

<img
  src="my.png"
  onerror="this.style.display='none'"
/>

如果找不到图片，您可以显示另一张图片，如下所示：

<img src="my.png" onerror="this.src = 'image-not-found.png';" />

【讨论】：

如果您不希望它影响布局，我建议使用 visibility:hidden 而不是 display:none。另外，如果您需要在图像未加载时显示背景颜色，请注意我关于将其包装在 div 中的观点。
@NickLockwood 也是一种方式
我无法在图片标签中手动添加任何内容，网站周围有很多标签。
很好的解决方案，我多年来一直致力于编写 Web 应用程序，但不知道 onerror 属性。谢谢！
不错的解决方案，但要小心：如果您不重置错误回调，并且由于某些意外原因，找不到您的“image-not-found.png”那么您的应用/网站将开始抛出无限错误循环。

【解决方案2】：

这是一种依赖于浏览器的行为，但您对此无能为力。这里有几个选项：

1) 使用 JavaScript 向图像添加一个 onerror 处理程序，当图像加载失败时将其隐藏，方法是使用 css 将其设置为隐藏（您需要有一个包含 div 以将背景颜色应用为背景颜色如果图像是 hdden 则不会显示）。

要在不使用 jQuery 且不修改代码的情况下将错误处理程序应用于站点中的每个图像，您可以执行此操作（将其放在页面末尾的脚本中 - 如果它位于 @987654321 中，它将不起作用@ 并且您不能将它放在 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 标签）。

【讨论】：

【解决方案3】：

这是某些浏览器的一个功能 - 据我所知，Firefox、Chrome 和 Safari 什么都没有显示，而 Internet Explorer 显示一个损坏的图像图标。没有使用 Javascript，我不相信你可以覆盖这种行为。

【讨论】：

至少在FF中，可以用img:-moz-broken{-moz-force-broken-image-icon:1;}强制图标

【解决方案4】：

浏览器会显示损坏的图像图标。这不是您可以在代码中更改的内容。我想你会发现不同的浏览器处理丢失图像的方式不同。

不过，您想做的事情可能会有不同的处理方式......

风格：

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的宽高需要和图片的宽高匹配。

【讨论】：

但是IE在找不到原图的时候还是会显示一个红色的“X”。

【解决方案5】：

一个简单的解决方案是使用占位符空白图像。这通常用于精灵，但我认为您也可以使用它。

您要做的是，创建一个启用透明度的 1x1 px 空白 gif 图像，将“src”属性指向 blank.gif 并通过 css background-image 属性提供图像。因此，即使没有找到背景图片，也不会显示断开的链接图片。

【讨论】：

你应该知道，虽然这有一个小缺点。当然是额外的图像请求。您可以通过尽可能利用 sprite 来利用这一点，从而减少图像请求的总数。
我会创建一个 1px x 1px 的 base64 表示并将其存储在 JavaScript 中。这将消除网络请求。 Base64 图像的效率稍低一些，但在 1px x 1px 时没关系。此外，如果您使用精灵，您可以只选择您想要使用的 1 个像素，因为如果您走那条路线，无论如何都会下载它。我在下面发布了这个作为答案。

【解决方案6】：

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);"/>

【讨论】：

【解决方案7】：

尝试 this.remove() 删除损坏的图像占位符：

<div class="cell">
  <p>
    <img src="pic.png" onerror="this.remove();" />
  </p>
</div>

我使用单元格 div 来保留布局。

【讨论】：