JavaScript, jQuery 또는 CSS를 사용하여 깨진 이미지 아이콘을 숨기려면 어떻게 해야 합니까?

JavaScript/jQuery/CSS를 사용하여 "이미지를 찾을 수 없음" 아이콘을 자동으로 숨기기

렌더링된 HTML 페이지에서 이미지가 누락되면 기본값 "이미지를 찾을 수 없음" 아이콘은 주의를 산만하게 하고 사용자 경험을 방해할 수 있습니다. 다행히 다양한 기술을 사용하여 이 아이콘을 숨길 수 있는 여러 가지 방법이 있습니다.

JavaScript/jQuery

가장 간단한 방법은 onerror 이벤트 핸들러를 사용하는 것입니다. 이미지가 로드되지 않으면 onerror 이벤트가 트리거되어 사용자 지정 작업을 실행할 수 있습니다. 그러한 작업 중 하나는 이미지를 숨기는 것입니다.

<img onerror="this.style.display = 'none';" src="path/to/image.png">

CSS

CSS는 로드에 실패한 이미지에 대해 특정 스타일을 정의하여 보다 간단한 접근 방식을 제공합니다. 표시 속성을 사용하여 이미지의 가시성을 숨김으로 설정할 수 있습니다:

img.hide-if-failed {
    display: none;
}

그런 다음 이 클래스를 이미지에 할당합니다:

<img class="hide-if-failed" src="path/to/image.png">

JavaScript/jQuery 사용 다른 요소를 숨기려면

"이미지를 찾을 수 없음" 아이콘이 div와 같은 다른 요소 내에 포함된 경우, 이미지 로드에 실패하면 JavaScript 또는 jQuery를 사용하여 상위 요소를 숨길 수 있습니다.

$('img').on('error', function() {
  $(this).parent().hide();
});

위 내용은 JavaScript, jQuery 또는 CSS를 사용하여 깨진 이미지 아이콘을 숨기려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!