-
[HTML] 이미지 오류시 대체 이미지 표시하기programming/HTML&CSS 2022. 7. 23. 13:32반응형
HTML5 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/반응형'programming > HTML&CSS' 카테고리의 다른 글
[HTML] input 숫자만 입력받기(양수만) (0) 2019.12.25 [HTML&CSS] 속성 검색 하기(값으로 시작, 포함, 끝) (0) 2019.12.14 [HTML&CSS] 마우스 커서 변경하기(물음표, 금지, 손가락 등) (0) 2019.11.11 [HTML&CSS] CSS 우선순위 적용 (!important) (0) 2019.11.10 [html] 스크립트 삽입 위치와 async, defer 속성 (0) 2019.10.26