如何在Angular應用程序中隱藏破碎的圖像

我已經構建了一個利用Instagram API來提取圖像的Angular應用程序。如果用戶以後刪除了圖像，我最終會看到破損的圖像（404）。我試圖用jQuery來隱藏包含這些（破碎）圖像的div，但它們仍然出現。如何在Angular應用程序中隱藏破碎的圖像

我放在下面的jQuery的「custom.js」文件，我在我的「的index.html」文件中引用：

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

我引用的jQuery的頭，然後「custom.js」的是index.html，如下：

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

...這裏是我試圖在此jQuery的應用到HTML：

<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>

來源

2014-11-08 MattDionis

爲什麼不刪除？你不需要再顯示它。 – cychoi 2014-11-08 05:19:29

@cychoi，刪除也是一個選項。問題是，上面的jQuery目前沒有工作，我不明白爲什麼。 – MattDionis 2014-11-10 15:47:25

您提供的代碼有效。檢查這裏：http://jsfiddle.net/fqxw0dqg/ – cychoi 2014-11-12 17:03:14

我結束了使用下面的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);"

來源

2015-01-09 18:15:56 MattDionis

我認爲這將是走的路。我遇到的問題，與任何圖像的錯誤導致所有隱藏 - 我實際上響應onerror =「this.style.display ='無'」 – 2018-01-20 01:54:39

嘗試從破碎的圖像中刪除src屬性，但我認爲這仍然可能無法正常工作，因爲角度可能會將此屬性帶回。

如果這樣都不行，請試試這個： https://stackoverflow.com/a/17122325/4229156

來源

2014-11-08 02:54:23

到目前爲止我發現的「最佳」選項是使用這個HTML標籤：'onerror =「this.style.display ='none'」'問題是，這隻隱藏圖像。我需要隱藏包含div。 – MattDionis 2014-11-10 15:52:19

如何在Angular應用程序中隱藏破碎的圖像

回答

相關問題