img 요소의 사용법
src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정합니다.
alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.
지원하는 이미지 형식
HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않으므로, 각각의 사용자 에이전트는 서로 다른 형식을 지원합니다. 전체 목록은 웹 브라우저가 지원하는 이미지 형식 안내서를 참고하세요.
이미지를 가져올 수 없을 때
이미지를 불러오거나 그릴 때 오류가 발생했고, onerror 속성에 오류 처리기를 등록했다면 error 이벤트와 함께 처리기를 호출합니다. 오류는 다양한 상황에서 발생할 수 있는데, 그 중 일부 원인은 다음과 같습니다.
src 속성이 비었거나 null임.
src의 URL이 현재 사용자가 보는 페이지의 URL과 같음.
지정한 이미지가 손상돼 불러올 수 없음.
이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, img 요소의 속성에도 크기를 지정하지 않음.
사용자 에이전트가 지원하지 않는 이미지 형식이다.
예시
</img src="https://bit.ly/fcc-relaxing-cat" alt="귀여운 고양이 사진"/>
Welcome~!