programming/HTML&CSS
[HTML] 이미지 오류시 대체 이미지 표시하기
LeeBorn
2022. 7. 23. 13:32
반응형
html에서 이미지를 표시할 때, 이런저런 이유로 이미지가 표시되지 않을 수 있다.
이럴 때 대체 이미지를 설정해놓으면 엑박으로 화면이 깨지는 것을 방지할 수 있고,
이미지가 잘못되었다는 것을 바로 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background-color: gray;">
<img src="C:\mountains.jpg" alt="" width="500px" height="500px">
</div>
</body>
</html>위 코드는 일반적인 이미지 태그의 src 속성만 적용한 코드다.
(*로컬 경로라서 복사하여도 이미지는 보이지 않는다.)
일단 정상적으로 보일 경우는 아래처럼 산을 보여준다.
하지만 경로를 잘못 적었을 경우에는 아래처럼 이미지가 보이지 않는다.
<div style="background-color: gray;">
<img src="C:\mountains22.jpg" alt="" width="500px" height="500px">
</div>
이럴 경우 onerror 속성을 적용하면 해당 경로에 있는 차를 보여준다.
<div style="background-color: gray;">
<img src="C:\mountains22.jpg" onerror="this.src='C:\car.jpg'" alt="" width="500px" height="500px">
</div>
- 위 작성된 글에는 잘못된 부분이 있을 수 있습니다. 알려주시면 수정하겠습니다.
※ info
출처 : https://pixabay.com/ko/
mountains.jpg : https://pixabay.com/ko/photos/%ec%82%b0-%ec%98%a4%eb%b2%84%ec%95%8c%ed%94%84-%ed%8c%a8%ec%8a%a4-%ec%82%b0%ec%95%85%eb%8f%84%eb%a1%9c-7319059/
car.jpg : https://pixabay.com/ko/photos/%ec%b0%a8-%ec%97%94%ec%a7%84-%eb%b0%94%ed%80%b4-%eb%b9%88%ed%8b%b0%ec%a7%80-%ec%9e%90%eb%8f%99%ec%b0%a8-7275386/
반응형