이미지 파일을 찾을 수 없을 때 렌더링 된 HTML 페이지에서 클래식 “이미지를 찾을 수 없음” 아이콘 을 숨기는 방법을 알고 있습니까?
JavaScript / jQuery / CSS를 사용하는 작업 방법이 있습니까?
답변
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 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-src
Angular.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"
/>
기타