프로그래밍 언어/HTML,CSS,JS

jQuery / JavaScript 이미지 오류 발생시 대체 이미지를 사용하는 방법

Rateye 2021. 12. 8. 11:05
728x90
반응형
질문 : 깨진 이미지를 대체하는 jQuery / JavaScript

여러 이미지가 포함 된 웹 페이지가 있습니다. 때때로 이미지를 사용할 수 없어 클라이언트의 브라우저에 깨진 이미지가 표시됩니다.

jQuery를 사용하여 이미지 세트를 가져오고 깨진 이미지로 필터링 한 다음 src를 대체하려면 어떻게해야합니까?

-jQuery로이 작업을 수행하는 것이 더 쉬울 것이라고 생각했지만 순수한 JavaScript 솔루션, 즉 Prestaul에서 제공하는 솔루션을 사용하는 것이 훨씬 쉬워졌습니다.

답변

이미지의 onError 이벤트를 처리하여 자바 스크립트를 사용하여 소스를 다시 할당합니다.

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}
<img src="image.png" onerror="imgError(this);"/>

또는 JavaScript 함수없이 :

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

다음 호환성 표에는 오류 기능을 지원하는 브라우저가 나열되어 있습니다.

http://www.quirksmode.org/dom/events/error.html

출처 : https://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images
728x90
반응형