图像占位符

我已经定义了图像标签的背景颜色，以便如果没有图像的颜色应该显示，但仍然破碎的图像图标显示如何删除该图像？图像占位符

我不想通过添加jquery或任何框架使页面庞大，也不能添加任何类型的div到图像，因为该网站几乎完成。

发现只有JavaScript

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

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

来源

2012-01-24 Pradyumna Challa

您可以指定'alt'属性，例如' my cute cat '，那么替代文本将以您应用的背景颜色显示。 –

答案你可以隐藏，使用下列内容：

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

可以显示其他的图像，如果没有找到图片如下：

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

来源

2012-01-24 13:17:23

我建议可见性：隐藏而不是显示：如果您不希望它影响布局，则不显示。此外，请注意我的意见，如果您需要在图像无法加载时显示背景色，请将其封装在div中。 –

@NickLockwood你这也是一种方式 –

我不能添加任何手动的图片标签有很多标签在网站周围。 –

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

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标签）。

来源

2012-01-24 13:17:33

这是某些浏览器的功能 - 据我所知，Firefox，Chrome和Safari没有显示任何内容，而Internet Explorer显示的图片图标很碎。使用Javascript，我不相信你可以重写这种行为。

来源

2012-01-24 13:18:09 MassivePenguin

至少在FF中，你可以用'img：-moz-broken {-moz-force-broken-image-icon：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的宽度和高度需要匹配图像的宽度和高度。

来源

2012-01-24 13:24:37

但是当原始图像时IE仍然会显示一个红色的“X”未找到。 – acme

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

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

与1x1的空白PNG

来源

2012-01-24 14:19:50 Ege

你应该知道，虽然这有一个小缺点。额外的图像请求的课程。您可以尽可能利用精灵，从而减少图像请求的总数。 – Ege

我会创建1px 1px的base64表示并将其存储在JavaScript中。这将消除网络请求。 Base64图像效率稍低，但是在1px×1px的情况下，这并不重要。另外，如果你使用一个精灵，你可以选择一个你想使用的像素，因为无论如何都会下载它，如果你走这条路线。我发布这个答案如下。 – 2012-11-17 18:09:14

解决方案

 function ImgError(source){ 
      empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII="; 
      source.src = "data:image/png;base64," + empty1x1png; 
      source.onerror = ""; 
      return true; 
     } 

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

来源

2013-02-11 19:08:44

尝试this.remove（）去除碎图像占位符：

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

我用电池的div保存布局。

来源

2017-08-10 13:50:08 MannyC

回答

相关问题