Javascript'te bir görüntünün yüklenemediğini algılama

Bir görüntü yolunun gerçek bir görüntüye yol açıp açmadığını belirlemenin bir yolu var mı, yani bir görüntünün Javascript'e yüklenemediğini tespit et.

Bir web uygulaması için, bir xml dosyasını ayrıştırıyorum ve bir görüntü yolu listesinden dinamik olarak HTML görüntüleri oluşturuyorum. Bazı görüntü yolları artık sunucuda mevcut olmayabilir, bu nedenle hangi görüntülerin yüklenemediğini tespit ederek ve bu HTML img öğesini silerek sorunsuzca başarısız olmak istiyorum.

Not JQuery çözümleri kullanılamayacak (patron JQuery'yi kullanmak istemiyor, evet, beni başlatmadığımı biliyorum). JQuery'de bir görüntünün ne zaman yüklendiğini algılamanın bir yolunu biliyorum, ancak başarısız olup olmadığını bilmiyorum.

Kodum img öğeleri oluşturmaya yöneliktir, ancak img yolunun görüntünün yüklenememesine yol açıp açmadığını nasıl tespit edebilirim?

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

Aşağıdaki kodu deneyebilirsiniz. Yine de tarayıcı uyumluluğunu garanti edemem, bu yüzden bunu test etmeniz gerekecek.

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");

Ve jQuery'ye dirençli patrona sempati duyuyorum!

Cevap güzel, ancak bir sorunu ortaya çıkarıyor. Ne zaman atarsanız onloadveya onerrordoğrudan atarsanız , daha önce atanan geri aramanın yerini alabilir. Bu güzel bir yöntem var nedeni budur "kayıtları bunun üzerine denir eventtarget belirtilen dinleyici" olarak da söylemek MDN'yi . Aynı etkinliğe istediğiniz kadar dinleyici kaydedebilirsiniz.

Cevabı biraz yeniden yazayım.

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");

Harici kaynak yükleme işlemi eşzamansız olduğundan, modern JavaScript'i aşağıdakiler gibi vaatlerle kullanmak daha da güzel olurdu.

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');
    }

);

Bu:

<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 için jQuery + CSS

JQuery ile bu benim için çalışıyor:

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

Ve bu resmi, aşağıdaki CSS3 özelliği ile boyutuna bakılmaksızın web sitemin her yerinde kullanabilirim:

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

İPUCU 1: En az 800 x 800 piksellik kare bir resim kullanın .

İPUCU 2: İnsanların portresiyle kullanmak içinobject-position: 20% 50%;

CSS yalnızca arka plan img için

Eksik arka plan resimleri için, her background-imagebildirime aşağıdakileri de ekledim :

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

NOT: şeffaf resimler için çalışmıyor.

Apache sunucu tarafı

Diğer bir çözüm, tarayıcıya göndermeden önce eksik görüntüyü Apache ile tespit etmek ve varsayılan no-img.png içeriği ile yeniden yerleştirmektir.

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

İşte başka bir cevap için yazdığım bir fonksiyon: Javascript Image Url Verify . Ben tam olarak neye ihtiyacınız olup olmadığını bilmiyorum, ama için işleyicileri içerir Kullanmak olacağını çeşitli teknikler kullanır onload, onerror, onabortve genel zaman aşımı.

Görüntü yükleme eşzamansız olduğundan, bu işlevi görüntünüzle çağırırsınız ve daha sonra sonuçla birlikte geri aramanızı çağırır.

aynen aşağıdaki gibi:

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

if (!img.complete) {

//has picture
}
else //not{ 

}