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

Question

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

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

if "../imgs/6.jpg" exists:

    var nImg = document.createElement("img6");

    nImg.src = "../imgs/6.jpg";

мысли? Спасибо!

235 8

javascript

8 ответов:

Comments

Ничего не найдено.

ajtrichards · Accepted Answer · 2013-09-17 00:38:43

вы могли бы использовать что-то вроде:
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.

    })

epascarello · Accepted Answer · 2015-05-11 01:49:03

вы можете использовать основной способ работы загрузчиков изображений, чтобы проверить, существует ли изображение.
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

adeneo · Accepted Answer · 2018-02-02 13:25:35

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

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

Jordan Bonitatis · Accepted Answer · 2018-08-06 23:33:12

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

Douglas · Accepted Answer · 2013-09-17 00:39:34

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

MAtkins · Accepted Answer · 2018-04-18 14:56:02

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

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

Ani Menon · Accepted Answer · 2016-11-16 07:11:55

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

Rohith Murali · Accepted Answer · 2018-05-30 12:59:29

вы можете сделать это с помощью axios, установив относительный путь к соответствующей папке изображений. Я сделал это для получения файла json. Вы можете попробовать тот же метод для файла изображения, вы можете передать эти примеры

Если вы уже установили экземпляр axios с baseurl в качестве сервера в другом домене, вам придется использовать полный путь к статическому файловому серверу, на котором вы развертываете веб-приложение.
  axios.get('http://localhost:3000/assets/samplepic.png').then((response) => {
            console.log(response)
        }).catch((error) => {
            console.log(error)
        })
Если изображение найдено ответ будет 200 а если нет, то будет 404.

кроме того, если файл изображения присутствует в папке assets внутри src, вы можете выполнить требование, получить путь и выполнить приведенный выше вызов с этим путем.
var SampleImagePath = require('./assets/samplepic.png');
axios.get(SampleImagePath).then(...)