반응형
아래 코드는 img 태그의 onerror 속성을 사용하여 오류 발생 시 대체 이미지를 표시하는 코드입니다.
저는 함수를 통해서 이미지 로딩 오류가 발생했을 때 실행되면서 이미지 경로를 변경하고, alt 속성까지 변경하였습니다.
대체 이미지가 필요 없으시면 오류 발생 시 이미지 요소를 숨기는 코드를 작성하시면 됩니다.
<img id="image" src="./images/sample_img.png" onerror="this.style.display='none'" />
<body>
<img id="image" src="./images/sample_img.png" onerror="handleImageError()" alt="Sample Image">
<script>
function handleImageError() {
var image = document.getElementById('image');
// 이미지 로딩 오류 시 대체 이미지로 교체
image.src = "./img1.jpg";
// 대체 이미지의 대체 텍스트 설정
image.alt = "Default Image";
}
</script>
</body>반응형
'개발이야기 > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] details, summary 태그로 아코디언 메뉴 만들기 (접기/펼치기) (0) | 2023.09.08 |
|---|---|
| [HTML&CSS] datalist 태그 사용해서 자동완성 구현하기 (0) | 2023.09.08 |
| [HTML&CSS] 텍스트, 이미지 깜빡이는 애니메이션 효과 주기 (0) | 2023.07.31 |
| [HTML&CSS] 색상 선택하기 (color picker) 사용법, 예제 (1) | 2023.07.19 |
| [HTML&CSS] 웹 페이지 가로모드 체크하기 (CSS 미디어 쿼리) (0) | 2023.04.14 |
댓글