Question

我用来显示图像，通过迭代，通过我说。但对于某些条目，图像实际上可能会丢失。有没有办法避免显示损坏的链接图标？（即如果无法找到图像，则跳过元素）

Answer 1

当然......你可以做几件事：

保持损坏的图像尺寸
如果您知道假定图像的大小，可以使用css强制它。

.img-broken {
   width: 250px;
   height: 250px;
   display: block;
}

更换图片
你想用更好的东西替换占位符。

<img src="..." onerror="this.src='/img/broken_img_error.jpg';">

完全删除图像
见@Slave回答。

Answer 2

试试这个：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script>
    function removeElement(elem) {
        var div = document.getElementById("mainDiv");
        div.removeChild(elem);
    }
</script>
    <title></title>
</head>
<body>
    <div id="mainDiv">
        <img  onerror='removeElement(this);' src="icon.png" />
    </div>
</body>
</html>

Answer 3

我不认为javascript是最好的方法。

如果您无法修复或依赖实际存在的图像（我知道），防止图像损坏的最简单方法是放置.htaccess文件（或等效文件，具体取决于您的文件）在您的图像文件夹中托管环境。

这种方法的好处在于没有任何关于浏览器支持的担忧。这发生在服务器上，因此用户可能正在使用一些古老的专有AOL 4.0浏览器，并且禁用了javascript，这仍然有效;您不必与用户代理差异竞争，也不必禁用javascript。

我将这个用于我的用户图片。图像路径位于数据库中，有时由于各种原因，数据库中指定的图像实际上不在文件夹中。这是位于.htaccess

中的images/users/文件的内容

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ images/users/default.png [R=301,L]

这样做是默默地将对不存在的文件的任何请求转发到文件default.png，这是我的“无照片可用”图像。现在，如果有images/users/this-does-not-exist.png请求，则会提供文件default.png。没有破碎的图像！

<强>文档

.htaccess代表Apache - http://httpd.apache.org/docs/2.2/howto/htaccess.html
ASP.NET 中的URL重写 - http://msdn.microsoft.com/en-us/library/ms972974.aspx
Helicon Ape - shim .htaccess支持IIS - http://www.helicontech.com/ape/

Answer 4

我假设你有这样的代码：

var imgs = document.getElementsByTagName('img');

用一些图像填充变量。您可以设置图像标记的onerror方法（如其他答案中所述），以便根据需要处理丢失的图像。

这将删除无法加载图片的<img>代码：

for (var i in imgs)
{
    imgs[i].onerror = function() {
        this.style.display = 'none';
    }
}

如果你想加载missing_image.jpg而不是让标签消失（小心这个，因为浏览器可能无法检测到无限循环，如果missing_image.jpg没有存在...）：

for (var i in imgs)
{
    imgs[i].onerror = function() {
        this.src = 'missing_image.jpg`;
    }
}

<强>来源：

Javascript图片对象：http://www.w3schools.com/jsref/dom_obj_image.asp
Html标记：http://www.w3schools.com/tags/tag_img.asp

Answer 5

除了对图像位置进行AJAX调用以验证您获得200结果然后相应地显示/隐藏之外，我想不出一个好方法。

为什么不修复损坏的图像链接？

跳过<img/>的缺失元素

5 个答案: