이미지 없을때 대체 이미지 태그 적용 (img src html css)

쇼핑몰 혹은 기업 홈페이지 작업 중 게시글이나 혹은 상품 이미지를 불러오는 경우가 많은데, 이때 해당 이미지가 첨부되어 있지 않거나, 제대로 노출되지 않을 때 대체할 수 있는 이미지를 이미지 태그상에 아예 삽입해놓을 수가 있다.

<img src="기본 이미지" onerror="this.src='기본 이미지 없을시 대체 이미지'" />

위와 같이 태그로 작업한다. 파란색 글씨 부분은 원래 불러오고자 하는 이미지 태그 url를 넣는다. 그리고 기본 이미지가 없을때를 대비한 대체 이미지 태그를 빨간 글씨처럼 삽입한다.

---

예. 대체 이미지 태그 적용시

만약 대체 이미지 태그를 삽입하지 않아서 기본 이미지가 불러오지 못하거나 에러가 뜬다면, 아래와 같은 엑박이 뜨게 된다. 웹사이트 기능상 하자가 있어보일 수 있기 때문에 대체 이미지 태그를 삽입하여 엑박이 뜨는 것을 사전에 방지할 수 있다.

 

대체 태그 미적용, 엑박

만약, 대체 이미지가 마땅히 없거나 아예 없애버리고 싶다면 대체 태그 또한 있다.

<img src="기본이미지" onerror="this.style.display='none'" /> 

위와 같이 에러 이미지 태그를 적용하면, 이미지가 뜨지 않는다.

---

본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :) 
"당신의 하루가 별보다 빛나길"