¿Verifica si la imagen existe en el servidor usando JavaScript?

Usando 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, que haría aproximadamente el siguiente código de borrador ...

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

Pensamientos? ¡Gracias!

Podrías 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.

    })

Puede usar la forma básica en que funcionan los precargadores de imágenes 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

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

Los eventos onloady onerrorle indicarán si la imagen se cargó correctamente o si ocurrió 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";

Si alguien viene a esta página buscando hacer esto en un cliente basado en React , puede hacer algo como lo siguiente, que fue una respuesta original proporcionada por Sophia Alpert del equipo 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} />;
    );
}

Un enfoque mejor y moderno es usar ES6 Fetch API para verificar si una imagen existe o no:

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

Asegúrese de realizar las solicitudes del mismo origen o CORS está habilitado en el servidor.

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

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

Básicamente, una versión promisificada de @espascarello y @adeneo responde, con un parámetro alternativo:

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.

Nota: Personalmente, me puede gustar más la fetchsolución, pero tiene un inconveniente: si su servidor está configurado de una manera específica, puede devolver 200/304, incluso si su archivo no existe. Esto, por otro lado, hará el trabajo.

Puede hacer esto con sus axios configurando la 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 servidor en un dominio diferente, tendrá que usar la ruta completa del servidor de archivos estático 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, de lo contrario, 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(...)

Esto funciona bien:

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

Puede consultar este enlace para verificar si existe un archivo de imagen con 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'`;
    } } ```