img 태그 404 Error시에 대체 이미지 띄우기

img 태그 404 Error가 발생하면 대체 이미지를 띄우는 것은 쉽다.

아니 처음부터 그렇게 만들면 별로 걱정할 문제는 아니다.

그리고 대체로 레이아웃을 구성하는 이미지는 bg속성을 준 스타일을 먹이는 경우가 대부분이므로, bg가 깔리지 않으면 스타일만 변경해 주면 된다.

그 이외의 레이아웃을 구성하는 이미지 요소들도 마찬가지로 처리하면 된다.

문제는 게시판이나, 갤러리 등 다수 사용자 빌런 그룹이 존재하지 않는 이미지를 올리거나, 올렸던 이미지 소스 주소가 없어진 경우에 발생하는 이미지 에러 문제는 보통 다음과 같이 해결해 주어야 한다.

<img id="태그_아이디" scr="이미지_주소" onError="this.src='대체_이미지_주소';">

그런데 앞서도 지적했지만 게시판에 이미지를 불펌해다 붙이는 사용자들이 친절하게 html태그를 열어서 대체 이미지 주소를 입력하는 attr을 집어넣기를 바라는 것은 무리다.

따라서 global한 제이쿼리가 img태그를 한 번 돌면서 에러가 있으면 대체 이미지로 변경해 주거나 이미지를 없애는 작업을 해 주는 것이 좀 더 친절한 방법이 될 것이다.

$(document).ready(function () {
    // no image
    $("img").each(function (i, ele) {
        var uri = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
        //이미 load된 이미지들을 처리하기 위한 코드
        if (ele.src != '' && ele.complete == true && ele.naturalWidth == 0) {
            $(this).attr("src", uri);
            $(this).attr("width", "1px");
        }
        //load되지 않은 이미지들은 error 이벤트를 추가해준다
        $(this).on('error', function () {
            $(this).attr("src", uri);
            $(this).attr("width", "1px");
        });
    });
});

이 코드가 그나마 가장 짧은 코드다.

제이쿼리 each를 돌려서 이미 로드된 이미지를 찾아서 에러가 발생한 지를 판별하는 것은 조건문에 주어진 조건들이다.

에러가 감지된 이미지에 data:image/gif;base64로 작성된 이미지 소스를 주었지만, 꼭 저게 아니어도 온라인 상에 존재하는 대체 이미지 주소를 부여해도 된다.

마찬가지로 "width", "1px"도 취향 문제다.

스타일을 적절히 주거나, 대체 이미지의 크기로 지정해 주어도 된다.