Проверьте, существует ли изображение на сервере с помощью JavaScript?

Ответ 1

Вы можете использовать что-то вроде:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Очевидно, вы могли бы использовать jQuery/аналогичный для выполнения вашего HTTP-запроса.

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

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

    })

Ответ 2

Вы можете использовать базовые средства предварительного просмотра изображений для проверки, существует ли изображение.

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

Ответ 3

Вы можете просто проверить, загружено ли изображение или нет, используя встроенные события, которые предоставляются для всех изображений.

События 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";

Ответ 4

Если кто-то заходит на эту страницу, желая сделать это в клиенте React -based, вы можете сделать что-то вроде нижеприведенного, оригинал ответа, предоставленный Софией Альперт из команды 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} />;
    );
}

Ответ 5

Если вы создаете тег изображения и добавляете его в DOM, он должен запускать его событие onload или onerror. Если запущен onerror, изображение не существует на сервере.

Ответ 6

Это прекрасно работает:

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

Ответ 7

Вы можете вызвать эту функцию 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;
    }
}

Ответ 8

Вы можете сделать это с помощью ваших осей, установив относительный путь к соответствующей папке изображений. Я сделал это для получения 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(...)

Ответ 9

В основном обещанная версия ответов @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.

Ответ 10

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

Демо: @http://jsfiddle.net/Ns5mU/304/

Ответ 11

Лучший и современный подход - использовать 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 включен на сервере.