Vérifier si l'image existe sur le serveur en utilisant JavaScript ?

Question

En utilisant javascript, y a-t-il un moyen de savoir si une ressource est disponible sur le serveur ? Par exemple, j'ai des images 1.jpg - 5.jpg chargées dans la page html. J'aimerais appeler une fonction JavaScript toutes les minutes environ qui ferait en gros le code scratch suivant...

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

Réflexions ? Merci.

Answer 1

Vous pourriez utiliser quelque chose comme :

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Vous pouvez évidemment utiliser jQuery ou un produit similaire pour effectuer votre requête HTTP.

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

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

    })

Answer 2

Vous pouvez utiliser le fonctionnement de base des préchargeurs d'images pour vérifier si une image existe.

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

Answer 3

Vous pouvez simplement vérifier si l'image se charge ou non en utilisant les événements intégrés qui sont fournis pour toutes les images.

El onload y onerror vous indiqueront si l'image s'est chargée avec succès ou si une erreur s'est produite :

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

Answer 4

Une meilleure approche, plus moderne, consiste à utiliser l'ES6. API de récupération pour vérifier si une image existe ou non :

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

Assurez-vous que vous effectuez les requêtes same-origin ou que CORS est activé sur le serveur.

Answer 5

Si quelqu'un vient sur cette page en cherchant à faire cela dans une React -vous pouvez faire quelque chose comme ce qui suit, qui est une réponse originale fournie par Sophia Alpert de l'équipe React aquí

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