background-image URL 로드 실패 시

img 태그로 이미지를 그릴 경우 이미지 로드에 실패하면, 아래처럼 onerror 함수로 대체 이미지를 출력할 수 있다.

<img src="/img/..." onerror="imgError(this)"/>

function imgError (imgTag) {
  imgTag.onerror="";
  imgTag.src="/img/noname.jpg";
}

 

 

 

그렇다면 background-image css 속성으로 이미지를 불러온 경우에는 에러 처리를 어떻게 할까?

<div class="backgroundImg"></div>

.backgroundImg {
  background-image: url('원본 이미지'), url('실패시 이미지');
  ...
}

 

--> 원본 이미지 url 값 뒤에 실패 시 보여줄 이미지 url 값을 입력하면 된다.

 

어떤 원리인가?)

background-image, background-repeat 등 background 관련 속성은 콤마와 함께 여러 개 값을 입력할 수 있다.

background-image 속성 값으로 여러 개를 사용한다면, 첫번째 온 값이 엘리먼트 가장 위에 그려지고, 마지막에 온 값은 엘리먼트의 가장 아래 축에 겹쳐져 그려진다.

위 코드블럭처럼 url을 두 개 사용하면, 첫번째 값인 원본 이미지가 가장 윗면에 그려지고, 뒤에 실패시 이미지가 위치해 있을 것이다. 이때 첫번재 이미지 로드에 실패해 그려지지 않는다면 뒤에 있던 실패 이미지가 보여지는 원리이다.

 

참고점)

이런 원리이다 보니 만약 원본 이미지를 불러오는 속도가 느리다면, 뒤에 위치해 있던 실패 시 출력할 이미지가 먼저 보여질 것이다.

 

 

 

 

 

 

참고 사이트

stackoverflow.com/questions/7816951/css-extra-background-image-for-when-the-first-image-doesnt-load