ejemplos - ¿Verifica si existe imagen en el servidor usando JavaScript?

javascript html

Question

Al usar javascript, ¿hay alguna manera de saber si un recurso está disponible en el servidor? Por ejemplo, tengo imágenes 1.jpg - 5.jpg cargadas en la página html. Me gustaría llamar a una función de JavaScript cada minuto más o menos, lo que haría más o menos el siguiente código de borrador ...

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

¿Pensamientos? ¡Gracias!

Answer 1

Esto funciona bien:

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

Answer 2

Podría usar algo como:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Obviamente, podría usar jQuery / similar para realizar su solicitud HTTP.

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

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

    })

Answer 3

Puede hacer esto con sus axios estableciendo una ruta relativa a la carpeta de imágenes correspondiente. He hecho esto para obtener un archivo json. Puede probar el mismo método para un archivo de imagen, puede consultar estos ejemplos

Si ya ha configurado una instancia de axios con baseurl como un servidor en un dominio diferente, deberá usar la ruta completa del servidor de archivos estáticos donde implementa la aplicación web.

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

Si se encuentra la imagen, la respuesta será 200 y si no, será 404.

Además, si el archivo de imagen está presente en la carpeta de activos dentro de src, puede hacer un requerimiento, obtener la ruta y hacer la llamada anterior con esa ruta.

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

Answer 4

Puede llamar a esta función JS para verificar si el archivo existe en el servidor:

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

Answer 5

Puede usar la forma básica en que los precargadores de imágenes trabajan para probar si existe una imagen.

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 6

Puede verificar si la imagen se carga o no utilizando los eventos incorporados que se proporcionan para todas las imágenes.

Los eventos onload y onerror le indicarán si la imagen se cargó correctamente o si se produjo un error:

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 7

Si alguien viene a esta página buscando hacer esto en un cliente basado en React , puede hacer algo como el siguiente, que fue una respuesta original proporcionada por Ben Alpert del equipo de React here

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

Answer 8

Si crea una etiqueta de imagen y la agrega al DOM, su evento onload o onerror debería activarse. Si onerror se activa, la imagen no existe en el servidor.

Answer 9

$("img").on("load",function(){
  alert(" Image Exists...!");
 }).on("error", function(){
   alert("ERROR");
});

Demostración: @ http://jsfiddle.net/Ns5mU/304/