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

Utiliser javascript est-il possible 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. Je voudrais appeler une fonction JavaScript toutes les minutes environ qui ferait à peu près le code de travail suivant ...

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

Pensées? Merci!

Vous pouvez utiliser quelque chose comme:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Évidemment, vous pouvez utiliser jQuery / similar 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.

    })

Vous pouvez utiliser le fonctionnement de base des préchargeurs d'images pour tester 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

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

Les événements onloadet onerrorvous indiqueront si l'image a été 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";

Si quelqu'un vient sur cette page pour le faire dans un client basé sur React , vous pouvez faire quelque chose comme ci-dessous, qui était une réponse originale fournie par Sophia Alpert de l'équipe React ici

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

Une approche meilleure et moderne consiste à utiliser l' API ES6 Fetch 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 demandes de même origine ou que CORS est activé sur le serveur.

Si vous créez une balise d'image et l'ajoutez au DOM, son événement onload ou onerror devrait se déclencher. Si une erreur se déclenche, l'image n'existe pas sur le serveur.

Vous pouvez appeler cette fonction JS pour vérifier si le fichier existe sur le serveur:

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

Fondamentalement, une version promis de @espascarello et @adeneo répond, avec un paramètre de repli:

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.

Remarque: Personnellement, j'apprécie fetchdavantage la solution, mais elle présente un inconvénient: si votre serveur est configuré d'une manière spécifique, il peut renvoyer 200/304, même si votre fichier n'existe pas. Ceci, d'autre part, fera le travail.

Vous pouvez le faire avec votre axios en définissant un chemin relatif vers le dossier d'images correspondant. J'ai fait cela pour obtenir un fichier json. Vous pouvez essayer la même méthode pour un fichier image, vous pouvez vous référer à ces exemples

Si vous avez déjà défini une instance axios avec baseurl comme serveur dans un domaine différent, vous devrez utiliser le chemin complet du serveur de fichiers statiques sur lequel vous déployez l'application Web.

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

Si l'image est trouvée, la réponse sera 200 et sinon, elle sera 404.

De plus, si le fichier image est présent dans le dossier assets à l'intérieur de src, vous pouvez faire un require, obtenir le chemin et faire l'appel ci-dessus avec ce chemin.

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

Cela fonctionne bien:

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

Vous pouvez consulter ce lien pour vérifier si un fichier image existe avec JavaScript.

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