JavaScript kullanarak sunucuda görüntü var mı kontrol edin?

Javascript kullanmak, sunucuda bir kaynak olup olmadığını anlamanın bir yolu var mı? Örneğin html sayfasına 1.jpg - 5.jpg resimleri yükledim. Her dakika bir JavaScript işlevi çağırmak istiyorum, bu kabaca aşağıdaki sıfırlama kodunu yapar ...

if "../imgs/6.jpg" exists:
    var nImg = document.createElement("img6");
    nImg.src = "../imgs/6.jpg";

Düşünceler? Teşekkürler!

Şunun gibi bir şey kullanabilirsiniz:

function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;

}

Açıkçası, HTTP isteğinizi gerçekleştirmek için jQuery / benzerini kullanabilirsiniz.

$.get(image_url)
    .done(function() { 
        // Do something now you know the image exists.

    }).fail(function() { 
        // Image doesn't exist - do something else.

    })

Bir görüntünün var olup olmadığını test etmek için görüntü ön yükleyicilerin temel çalışma şeklini kullanabilirsiniz.

function checkImage(imageSrc, good, bad) {
    var img = new Image();
    img.onload = good; 
    img.onerror = bad;
    img.src = imageSrc;
}

checkImage("foo.gif", function(){ alert("good"); }, function(){ alert("bad"); } );

JSFiddle

Tüm görüntüler için sağlanan yerleşik olayları kullanarak görüntünün yüklenip yüklenmediğini kontrol edebilirsiniz.

onloadVe onerrorgörüntü başarıyla yüklendi veya eğer bir hata oluştu eğer olaylar söyleyecektir:

var image = new Image();

image.onload = function() {
    // image exists and is loaded
    document.body.appendChild(image);
}
image.onerror = function() {
    // image did not load

    var err = new Image();
    err.src = '/error.png';

    document.body.appendChild(err);
}

image.src = "../imgs/6.jpg";

Herkes bunu isteyen bu sayfayı gelirse tepki tabanlı istemci, takıma tepki Sophia Alpert tarafından sağlanan bir cevap orijinal idi aşağıda gibi bir şey, yapabileceği burada

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}

Daha iyi ve modern bir yaklaşım, bir görüntünün var olup olmadığını kontrol etmek için ES6 Fetch API'sini kullanmaktır :

fetch('https://via.placeholder.com/150', { method: 'HEAD' })
    .then(res => {
        if (res.ok) {
            console.log('Image exists.');
        } else {
            console.log('Image does not exist.');
        }
    }).catch(err => console.log('Error:', err));

Aynı kaynaklı istekleri yaptığınızdan veya sunucuda CORS'nin etkinleştirildiğinden emin olun.

Bir resim etiketi oluşturur ve bunu DOM'a eklerseniz, ya onload ya da onerror olayı tetiklenmelidir. Bir hata oluşursa, görüntü sunucuda mevcut değildir.

Dosyanın Sunucuda mevcut olup olmadığını kontrol etmek için bu JS işlevini çağırabilirsiniz:

function doesFileExist(urlToFile)
{
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile, false);
    xhr.send();

    if (xhr.status == "404") {
        console.log("File doesn't exist");
        return false;
    } else {
        console.log("File exists");
        return true;
    }
}

Temel olarak, @ espascarello ve @adeneo'nun bir geri dönüş parametresi ile yanıt veren bir sürümü:

const getImageOrFallback = (path, fallback) => {
  return new Promise(resolve => {
    const img = new Image();
    img.src = path;
    img.onload = () => resolve(path);
    img.onerror = () => resolve(fallback);
  });
};

// Usage:

const link = getImageOrFallback(
  'https://www.fillmurray.com/640/360',
  'https://via.placeholder.com/150'
  ).then(result => console.log(result) || result)

// It can be also implemented using the async / await API.

Not: Kişisel olarak fetchçözümü daha çok beğenebilirim , ancak bir dezavantajı var - sunucunuz belirli bir şekilde yapılandırılmışsa, dosyanız olmasa bile 200/304 döndürebilir. Öte yandan, bu işi yapacak.

Bunu, ilgili görüntüler klasörüne göreceli yol ayarlayarak aksiyolarınızla yapabilirsiniz. Bunu bir json dosyası almak için yaptım. Bir görüntü dosyası için aynı yöntemi deneyebilirsiniz, bu örneklere başvurabilirsiniz

Baseurl ile bir axios örneğini farklı etki alanında sunucu olarak zaten ayarladıysanız, web uygulamasını dağıttığınız statik dosya sunucusunun tam yolunu kullanmanız gerekecektir.

  axios.get('http://localhost:3000/assets/samplepic.png').then((response) => {
            console.log(response)
        }).catch((error) => {
            console.log(error)
        })

Görüntü bulunursa yanıt 200, yoksa 404 olacaktır.

Ayrıca, görüntü dosyası src içindeki varlıklar klasöründe mevcutsa, bir talepte bulunabilir, yolu alabilir ve bu yolla yukarıdaki çağrıyı yapabilirsiniz.

var SampleImagePath = require('./assets/samplepic.png');
axios.get(SampleImagePath).then(...)

Bu iyi çalışıyor:

function checkImage(imageSrc) {
    var img = new Image();        
    try {
        img.src = imageSrc;
        return true;
    } catch(err) {
        return false;
    }    
}

JavaScript içeren bir resim dosyası olup olmadığını kontrol etmek için bu bağlantıya başvurabilirsiniz .

checkImageExist.js:

    var image = new Image();
    var url_image = './ImageFolder/' + variable + '.jpg';
    image.src = url_image;
    if (image.width == 0) {
       return `<img src='./ImageFolder/defaultImage.jpg'>`;
    } else {
       return `<img src='./ImageFolder/`+variable+`.jpg'`;
    } } ```