Перевірте, чи існує зображення на сервері за допомогою JavaScript?

Використовуючи javascript, чи є спосіб визначити, чи доступний ресурс на сервері? Наприклад, у мене на сторінці html завантажені зображення 1.jpg - 5.jpg. Я хотів би викликати функцію JavaScript щохвилини або близько того, що б приблизно виконати наступний код скретчу ...

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

Думки? Дякую!

Ви можете використовувати щось на кшталт:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Очевидно, ви можете використовувати jQuery / similar для виконання свого HTTP-запиту.

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

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

    })

Ви можете використовувати основний спосіб роботи завантажувачів зображень, щоб перевірити, чи існує зображення.

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

Ви можете просто перевірити, завантажується чи ні, використовуючи вбудовані події, які передбачені для всіх зображень.

Події onloadта onerrorподії підкажуть, чи вдало завантажено зображення чи сталася помилка:

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

Якщо хтось заходить на цю сторінку, бажаючи зробити це у клієнта, що базується на React , ви можете зробити щось на кшталт наведеного нижче, яке було оригінальною відповіддю, яку надала Софія Альперт із команди React тут

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

Кращим і сучасним підходом є використання ES6 Fetch API для перевірки наявності зображення чи ні:

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

Переконайтеся, що ви або робите запити одного походження або CORS увімкнено на сервері.

Якщо ви створите тег зображення та додасте його до DOM, його подія завантаження або onerror має спрацювати. Якщо onerror запускається, зображення не існує на сервері.

Ви можете зателефонувати на цю функцію JS, щоб перевірити, чи існує файл на сервері:

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

В основному, це обіцяна версія відповідей @espascarello та @adeneo із запасним параметром:

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.

Примітка:fetch рішення особисто мені може сподобатися , але воно має недолік - якщо ваш сервер налаштований певним чином, він може повернути 200/304, навіть якщо ваш файл не існує. Це, з іншого боку, зробить цю роботу.

Це можна зробити за допомогою аксіосів, встановивши відносний шлях до відповідної папки зображень. Я зробив це для отримання файлу json. Ви можете спробувати той же спосіб для файлу зображення, ви можете посилатися на ці приклади

Якщо ви вже встановили екземпляр axios з baseurl в якості сервера в іншому домені, вам доведеться використовувати повний шлях статичного файлового сервера, де ви розгортаєте веб-додаток.

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

Якщо зображення знайдено, відповідь буде 200, а якщо ні - 404.

Крім того, якщо файл зображення присутній у папці активів всередині src, ви можете зробити вимогу, отримати шлях і зробити вищезгаданий виклик за допомогою цього шляху.

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

Це добре працює:

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

Ви можете посилатися на це посилання, щоб перевірити, чи існує файл зображення з 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'`;
    } } ```