Angular app에서 깨진 이미지를 숨기는 방법

Instagram API를 사용하여 이미지를 가져 오는 Angular 앱을 만들었습니다. 사용자가 나중에 이미지를 삭제하면 내가 깨진 이미지 (404 's)로 끝납니다. jQuery를 사용하여 이러한 (깨진) 이미지가 포함 된 div를 숨기려고했지만 여전히 나타납니다.Angular app에서 깨진 이미지를 숨기는 방법

내가 내 'index.html을'파일에서 참조는 'custom.js'파일에 다음 jQuery를 배치 한

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

내가 머리에 다음 'custom.js'jQuery를 참조

<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

@cychoi, 제거도 옵션이 될 것입니다. 문제는 위의 jQuery가 현재 전혀 작동하지 않고 있으며 그 이유를 파악할 수 없다는 것입니다. – MattDionis

제공 한 코드가 작동합니다. 여기를 확인하십시오 : http://jsfiddle.net/fqxw0dqg/ – cychoi

나는 내 이미지를 숨기려면 다음과 같은 자바 스크립트를 사용하여 끝났다. 첫 번째 함수는 내 이미지의 조부모를 숨기므로 전체 div가 숨겨집니다. 두 번째 기능은 인스 타 그램의 익명 사용자 이미지와 사용자 프로필 이미지 누락 대체

이

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 = 'none'"에 응답하고 있습니다. " –

은 다음과 같이의 'index.html을' 대신 손상된 이미지에서 src 속성을 제거해보십시오. 그러나이 속성을 다시 가져올 수 있기 때문에 여전히 작동하지 않을 수 있습니다. 문제가 해결되지 않을 경우

, 이것을 시도하십시오 https://stackoverflow.com/a/17122325/4229156

출처

2014-11-08 02:54:23

"onerror ="this.style.display = 'none' "'문제는, 지금까지 발견 된"가장 좋은 "옵션은이 HTML 태그를 사용하는 것입니다. 이것은 단지 이미지를 숨 깁니다. 포함 된 div를 숨길 필요가 있습니다. – MattDionis

Angular app에서 깨진 이미지를 숨기는 방법

답변

관련 문제