Как скрыть сломанные изображения в угловом приложении

Question

Я создал приложение с угловым выражением, которое использует API Instagram для рисования изображений. Если пользователь позже удаляет изображение, я получаю разбитые изображения (404). Я попытался использовать jQuery, чтобы скрыть div, содержащий эти (сломанные) изображения, но они все еще появляются.

Я поместил следующий 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> 

... и вот 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 из сломанных изображений, но я думаю, что это все еще может не работать, потому что угловой может вернуть этот атрибут.

Если это не будет работать, пожалуйста, попробуйте следующее: https://stackoverflow.com/a/17122325/4229156