Question

我已经构建了一个Angular应用程序，它利用Instagram API来提取图像。如果用户稍后删除图像，则最终会出现损坏的图像（404）。我试图使用jQuery隐藏包含这些（破碎）图像的div，但它们仍然出现。

我已将以下jQuery放在我在'index.html'文件中引用的'custom.js'文件中：

$(document).ready(function() {
    $("img").error(function() {
        $(this).parent().hide();
    });
});

我在'index.html'的头部引用了jQuery然后'custom.js'，如下所示：

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="js/custom.js"></script>

...这里是html我试图将这个jQuery应用到：

<a ng-href="{{image.link}}" target="_blank" title="{{image.text}}"><img ng-src="{{image.img}}" alt="" class="img-responsive" ng-style="homeColors" id="image"></a>

Answer 1

我最终使用以下Javascript来隐藏我的图片。第一个函数隐藏了我的图像的祖父母，以便隐藏整个div。第二个功能用Instagram的匿名用户图像替换缺少的用户个人资料图像：

function imgError(image){
  image.parentNode.parentNode.style.display = 'none';
}
function anonImg(image){
  image.src = 'https://instagramimages-a.akamaihd.net/profiles/anonymousUser.jpg';
}

只需将以下HTML添加到相应的图片中：

onerror="imgError(this);"
onerror="anonImg(this);"

Answer 2

尝试从损坏的图像中删除src属性，但我认为这仍然可能不起作用，因为angular可以恢复此属性。

如果这不起作用，请试试这个： https://stackoverflow.com/a/17122325/4229156

如何在Angular应用程序中隐藏损坏的图像

2 个答案: