Question

我已经使用背景颜色定义了图像标记，这样如果没有图像颜色应该显示但是图像图标仍然显示如何删除它？

我不想通过添加jquery或任何框架来使页面变得笨重，我也不能将任何类型的div添加到图像中，因为该网站几乎完成了。

仅使用javascript找到答案

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

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

Answer 1

你可以使用以下内容隐藏它：

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

如果找不到如下图像，则可以显示另一张图像：

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

Answer 2

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

Answer 3

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

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

Answer 4

这是某些浏览器的功能 - 据我所知，Firefox，Chrome和Safari在Internet Explorer显示损坏的图像图标时不显示任何内容。如果没有使用Javascript，我不相信你可以覆盖这种行为。

Answer 5

浏览器执行了损坏的图像图标。这不是你可以在代码中改变的东西。我想你会发现不同的浏览器以不同的方式处理丢失的图像。

你想做的事情可以用不同的方式处理，但是......

风格：

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的宽度和高度需要与图像的宽度和高度相匹配。

Answer 6

这是一种依赖于浏览器的行为，但你无法做任何事情。以下是几个选项：

1）使用JavaScript向图像添加一个onerror处理程序，当它无法通过使用css将其设置为隐藏来加载它时（您需要使用包含div来将背景颜色应用为背景颜色）如果图像是硬盘，则不会显示。）

要将错误处理程序应用于站点中的每个图像而不使用jQuery而不修改代码，您可以执行此操作（将其放在页面末尾的脚本中 - 如果它位于{{ 1}}你不能把它放在window.onload中，否则它会在图像加载之前激活。）

<head>

2）将图像设置为div上的css背景图像，而不是使用var images = document.getElementsByTagName('img'); for (i = 0; i < images.length; i++) { images[i].onerror = function() { this.style.visibility = 'hidden'; } }标记。它不是语义，但如果加载失败则不会显示损坏的图像图标，您仍然可以指定背景颜色和标签（不是alt标签）。

Answer 7

尝试 this.remove（）删除损坏的图片占位符：

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

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

图像占位符

7 个答案: