Cómo comprobar si existe una imagen en el servidor en JavaScript

En JavaScript moderno, puede usar la API Fetch para verificar si existe una imagen o cualquier otro archivo de recursos en el servidor. Fetch es una API simple basada en promesas para obtener recursos del servidor de forma asíncrona.

Aquí hay un ejemplo que usa Fetch API para verificar si existe una imagen:

fetch('/img/bulb.svg', { method: 'HEAD' })
    .then(res => {
        if (res.ok) {
            console.log('Image exists.');
        } else {
            console.log('Image does not exist.');
        }
    }).catch(err => console.log('Error:', err));

El código de ejemplo anterior envía una solicitud HTTP HEAD y verifica el código de respuesta. Si la respuesta es OK (código de estado 200), imprime que se encontró la imagen. De lo contrario, la imagen no existe.

Asegúrese de que está realizando las solicitudes del mismo origen o que CORS está habilitado en el servidor cuando usa la API Fetch. De lo contrario, arrojará un error de que el uso compartido de recursos de origen cruzado (CORS) está bloqueado. Además, Fetch API solo es compatible con navegadores modernos y no funciona en Internet Explorer.

Para obtener más compatibilidad con los navegadores, siempre puede usar el antiguo XHR que funciona en Internet Explorer 6 y superior:

// create an XHR object
const xhr = new XMLHttpRequest();

// listen for `onload` event
xhr.onload = () => {
    if (xhr.status == 200) {
        console.log('Image exists.');
    } else {
        console.log('Image does not exist.');
    }
};

// create a `HEAD` request
xhr.open('HEAD', '/img/bulb.svg');

// send request
xhr.send();

Los ejemplos anteriores no se limitan solo a verificar la presencia de imágenes en el servidor. Se pueden utilizar para comprobar la existencia de cualquier otro archivo como JavaScript, hojas de estilo en cascada (CSS), PDF, etc.