CSS – BACKGROUND-IMAGE 로딩 실패시 처리.

출처 : http://www.freesens.com/x/?p=835">http://www.freesens.com/x/?p=835




테스트 환경에서 작업하다보면 무의미한 경로를 집어넣어놔서 불러오기를 실패하는 경우가 많은데,
<img>태그는 src로 불러올 때 실패할 경우 onerror 속성을 추가해서 디폴트 이미지를 보여주게 처리하면 된다.

그런데 background-image 로 처리할 경우, 불러오기 실패했을 때 어떻게 처리해야하나 찾아봤더니 생각보다 너무 쉽고 간편하고 명확한 방법이 있었다.

.bg-item1{
    background-image: url('../../images/home/main/main-b-2.png'), 
    url('../../images/home/main/main-b-1.png');
}

이렇게 background-image 속성 자체에 두개의 값을 넣어주면 첫번째꺼 불러오기 실패했을 때, 두번째꺼를 보여준다.


나는 Vue.js를 이용해서 ajax로 불러온 url을 사용해야했기 때문에

<div class="bg-box bg-item1 bg-color1" 
	:style="'background-image:url('+getImg(list.banner_seq)+'), 
    url(\'../../images/home/main/main-b-1.png\')'">

이렇게 조금 길어지게 됐지만, 그래도 깔끔한 처리방식이다.

CSS 생각보다 정말 똑똑하게 잘만들어진 친구다.