CSS와 HTML을 사용하여 깨진 이미지를 숨기거나 바꾸려면 어떻게 해야 합니까?

CSS/HTML로 깨진 이미지 자리 표시자 숨기기

깨진 이미지 링크를 감지하는 데 있어 CSS와 HTML의 한계에도 불구하고 다음과 같은 최소한의 해결 방법이 있습니다. 이러한 인스턴스를 숨기거나 관리하세요.

Hiding Broken Broken 이미지

깨진 이미지 자리 표시자를 가리기 위해 태그:

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

이 속성을 사용하면 이미지 로드에 실패하면 해당 표시가 숨겨집니다.

백업 이미지로 교체

또는 손상된 경우 대체 이미지를 지정할 수 있습니다. 링크:

<img src="Error.src" onerror="this.src='fallback-img.jpg'" />

이미지 로드에 실패하면 소스가 지정된 대체 이미지로 전환됩니다.

참고: CSS와 HTML만으로는 구별할 수 없습니다. 손상된 이미지와 유효한 이미지 사이에서 onerror 속성은 두 경우 모두 손상된 이미지 자리 표시자를 처리하는 데 유용할 수 있습니다.

추가 옵션

사이트 전반에 걸쳐 깨진 여러 이미지를 관리하기 위해 JavaScript는 더욱 강력한 솔루션을 제공합니다. 이벤트 리스너를 DOM에 연결하고 페이지의 모든 이미지에 동일한 논리를 적용할 수 있습니다.

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
      img.onerror = function(){this.style.display='none';};
   })
});

이 스크립트는 DOM이 완전히 로드된 후 모든 손상된 이미지에 display: none 스타일을 적용합니다.

위 내용은 CSS와 HTML을 사용하여 깨진 이미지를 숨기거나 바꾸려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!