src 원본 이미지를 찾을 수 없을 때 "이미지를 찾을 수 없음" 아이콘을 자동으로 숨기는 방법

src 원본 이미지를 찾을 수 없을 때 "이미지를 찾을 수 없음" 아이콘을 자동으로 숨기는 방법

이미지 파일을 찾을 수 없을 때 렌더링된 HTML 페이지에서 고전적인 "Image not found" 아이콘을 숨기는 방법을 알고 있습니까?

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

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

사용할 수 있습니다.onerror이미지 로드에 실패할 때 동작할 JavaScript의 이벤트:

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 src="..." style="display: none" onload="this.style.display=''">

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

모든 이미지 오류를 숨기려면 페이지 하단(마감 본문 태그 바로 앞)에 이 JavaScript를 추가하십시오.

(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]%20가장 작은 %20 투명 %20 픽셀.html 참조).

물론 이 gif는 템플릿을 엉망으로 만들지 않도록 일부 글로벌 변수 안에 보관될 수 있습니다.

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

및 사용

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

기타.

빈칸만 추가하면 됩니다.alt의 속성<img>

이와 같은 것:<img src="..." alt="">

단순한 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;
}

언급URL : https://stackoverflow.com/questions/3235913/how-to-silently-hide-image-not-found-icon-when-src-source-image-is-not-found