src 소스 이미지를 찾을 수 없을 때“이미지를 찾을 수 없음”아이콘을 자동으로 숨기는 방법

이미지 파일을 찾을 수 없을 때 렌더링 된 HTML 페이지에서 클래식 "이미지를 찾을 수 없음" 아이콘 을 숨기는 방법을 알고 있습니까?

JavaScript / jQuery / CSS를 사용하는 작업 방법이 있습니까?

onerrorJavaScript 의 이벤트를 사용하여 이미지로드에 실패 할 때 작동 할 수 있습니다 .

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

질문 이후 jQuery에서 :

$("#myImg").error(function () { 
    $(this).hide(); 
});

또는 모든 이미지의 경우 :

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

당신은 사용해야하는 visibility: hidden대신 .hide()이미지를 숨기는 것은 레이아웃을 변경할 수있는 경우. 웹의 많은 사이트는 기본 "이미지 없음"이미지를 대신 사용 src하여 지정된 이미지 위치를 사용할 수 없을 때 해당 이미지를 속성으로 가리 킵니다 .

<img onerror='this.style.display = "none"'>

Gary Willoughby가 제안한 솔루션을 약간 수정했습니다. 깨진 이미지 아이콘이 간략하게 표시되기 때문입니다. 내 솔루션 :

    <img src="..." style="display: none" onload="this.style.display=''">

내 솔루션에서 이미지는 처음에는 숨겨져 있으며 성공적으로로드 된 경우에만 표시됩니다. 단점이 있습니다. 사용자는 하프로드 된 이미지를 볼 수 없습니다. 그리고 사용자가 JS를 비활성화하면 이미지를 볼 수 없습니다.

모든 이미지 오류를 숨기려면 페이지 하단 (닫는 body 태그 바로 앞에)에 다음 자바 스크립트를 추가하세요.

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

대답하기에는 조금 늦었지만 여기에 내 시도가 있습니다. 같은 문제에 직면했을 때 이미지 크기의 div를 사용하고 배경 이미지를이 div로 설정하여 문제를 해결했습니다. 이미지를 찾을 수없는 경우 div는 투명하게 렌더링되므로 모든 작업이 자바 스크립트 코드없이 자동으로 수행됩니다.

Andy E 의 대답 에 대한 빠른 조사를 수행하면 live()바인딩 할 수 없습니다 error.

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

그래서 당신은 같이 가야합니다

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

error event handler새 요소를 만들 때 직접 바인딩합니다 .

나는 ng-srcAngular.js에서 지시문을 사용할 때 여전히 작동하면서 정확하게 이것을 수행하는 멋진 방법을 찾았습니다 .

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

기본적으로 가장 짧은 투명 GIF입니다 ( http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% 참조) D0 % B5 % D1 % 80 / [20121112] % 20The % 20smallest % 20transparent % 20pixel.html )

물론이 gif는 일부 전역 변수 안에 보관할 수 있으므로 템플릿을 엉망으로 만들지 않습니다.

<script>
  window.fallbackGif = "..."
</script>

그리고 사용

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

기타

단순한 CSS 사용

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}