Vérifier si L'image existe sur le serveur en utilisant JavaScript?
avec javascript y a-t-il un moyen de savoir si une ressource est disponible sur le serveur? Par exemple, j'ai les images 1.jpg-5.jpg chargé dans la page html. J'aimerais appeler chaque minute une fonction JavaScript qui ferait grosso modo le code scratch suivant...
if "../imgs/6.jpg" exists:
var nImg = document.createElement("img6");
nImg.src = "../imgs/6.jpg";
? Merci!
8 réponses
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;
}
é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 la façon basique de travailler des pré-chargeurs d'image 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"); } );
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.
les événements onload et onerror vous 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 à la recherche de faire ceci dans un client React basé, 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} />;
);
}
si vous créez une balise image et l'ajoutez au DOM, son événement onload ou onerror devrait se déclencher. Si onerror incendies, l'image n'existe pas sur le serveur.
Cela fonctionne très bien:
function checkImage(imageSrc) {
var img = new Image();
try {
img.src = imageSrc;
return true;
} catch(err) {
return false;
}
}
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;
}
}
vous pouvez le faire avec votre axios en paramétrant le chemin relatif vers le dossier images correspondant. J'ai fait ça pour avoir un fichier json. Vous pouvez essayer la même méthode pour un fichier image, vous pouvez consulter 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 statique où vous déploierez 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é la réponse sera de 200 et, si non, il sera 404.
aussi, 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(...)