자바 스크립트에서 이미지가로드되지 않는 경우 감지

이미지 경로가 실제 이미지로 연결되는지 확인하는 방법이 있습니까? 즉, 이미지가 Javascript에서로드되지 않을 때 감지합니다.

웹 앱의 경우 xml 파일을 구문 분석하고 이미지 경로 목록에서 HTML 이미지를 동적으로 만듭니다. 일부 이미지 경로가 더 이상 서버에 존재하지 않을 수 있으므로 HTML img 요소를로드하고 삭제하는 데 실패한 이미지를 감지하여 정상적으로 실패하고 싶습니다.

참고 JQuery 솔루션은 사용할 수 없습니다 (상사는 JQuery를 사용하고 싶지 않습니다. 예, 시작하지 않습니다). 이미지가로드 될 때 JQuery에서 감지하는 방법을 알고 있지만 실패했는지 여부는 알 수 없습니다.

img 요소를 만드는 코드는 img 경로가 이미지로드 실패로 이어지는 지 어떻게 감지 할 수 있습니까?

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

다음 코드를 시도해 볼 수 있습니다. 그래도 브라우저 호환성을 보장 할 수 없으므로 테스트해야합니다.

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

그리고 jQuery에 저항하는 보스에 대한 제 공감입니다!

대답은 좋지만 한 가지 문제가 있습니다. onload또는 onerror직접 할당 할 때마다 이전에 할당 된 콜백을 대체 할 수 있습니다. 이것이 MDN에서 말하는 것처럼 "호출 된 EventTarget에 지정된 리스너를 등록" 하는 멋진 메서드가있는 이유 입니다. 동일한 이벤트에 원하는만큼 리스너를 등록 할 수 있습니다.

대답을 조금 다시 작성하겠습니다.

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

외부 리소스 로딩 프로세스는 비동기 적이므로 다음과 같은 약속과 함께 최신 JavaScript를 사용하는 것이 더 좋습니다.

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);

이:

<img onerror="this.src='/images/image.png'" src="...">

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});

img 용 jQuery + CSS

jQuery를 사용하면 이것이 나를 위해 일하고 있습니다.

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

다음 CSS3 속성을 사용하여 크기에 관계없이 내 웹 사이트의 모든 곳에서이 사진을 사용할 수 있습니다.

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

팁 1 : 최소 800 x 800 픽셀 의 정사각형 이미지 를 사용하십시오 .

TIP 2 : 인물 사진 과 함께 사용하려면object-position: 20% 50%;

background-img 전용 CSS

누락 된 배경 이미지의 경우 각 background-image선언에 다음을 추가했습니다 .

background-image: url('path-to-image.png'), url('no-img.png');

참고 : 투명 이미지에는 작동하지 않습니다.

Apache 서버 측

또 다른 해결책은 브라우저로 보내기 전에 Apache로 누락 된 이미지를 감지하고 기본 no-img.png 콘텐츠로 교체하는 것입니다.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

다음은 다른 답변을 위해 작성한 함수입니다 : Javascript Image Url Verify . 나는 당신이 필요로 정확히 무엇인지 모르겠지만, 그것은을위한 핸들러를 포함 당신이 사용하는 것이 다양한 기술을 사용하여 onload, onerror, onabort및 일반적인 타임 아웃을.

이미지로드는 비동기식이므로 이미지와 함께이 함수를 호출 한 다음 나중에 결과와 함께 콜백을 호출합니다.

아래와 같이 :

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}