Sprawdź, czy obraz istnieje na serwerze przy użyciu JavaScript?

Czy za pomocą javascript można sprawdzić, czy zasób jest dostępny na serwerze? Na przykład mam obrazy 1.jpg - 5.jpg załadowane na stronę html. Chciałbym wywoływać funkcję JavaScript mniej więcej co minutę, która z grubsza wykonałaby następujący kod zdrapki ...

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

Myśli? Dzięki!

Możesz użyć czegoś takiego:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Oczywiście możesz użyć jQuery / podobny do wykonania żądania HTTP.

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

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

    })

Możesz użyć podstawowego sposobu działania modułu wstępnego ładowania obrazu, aby sprawdzić, czy obraz istnieje.

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

Możesz po prostu sprawdzić, czy obraz się ładuje, czy nie, używając wbudowanych zdarzeń, które są dostarczane dla wszystkich obrazów.

onloadI onerrorwydarzenia powie, czy obraz załadowany pomyślnie lub jeśli wystąpił błąd:

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

Jeśli ktoś wejdzie na tę stronę i chce to zrobić w kliencie opartym na React , możesz zrobić coś takiego jak poniżej, która była oryginalną odpowiedzią dostarczoną przez Sophię Alpert z zespołu React tutaj

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

Lepszym i nowoczesnym podejściem jest użycie ES6 Fetch API do sprawdzenia, czy obraz istnieje, czy nie:

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

Upewnij się, że wykonujesz żądania tego samego pochodzenia lub na serwerze jest włączony mechanizm CORS.

Jeśli utworzysz tag obrazu i dodasz go do DOM, powinno zostać uruchomione zdarzenie onload lub onerror. Jeśli wystąpi błąd onerror, obraz nie istnieje na serwerze.

Możesz wywołać tę funkcję JS, aby sprawdzić, czy plik istnieje na serwerze:

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

Basicaly promisified wersja @espascarello i @adeneo odpowiedzi, z parametrem awaryjnej:

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.

Uwaga: rozwiązanie może mi się fetchbardziej podobać , ale ma wadę - jeśli Twój serwer jest skonfigurowany w określony sposób, może zwrócić 200/304, nawet jeśli Twój plik nie istnieje. To z drugiej strony wystarczy.

Możesz to zrobić za pomocą swoich axiosów, ustawiając względną ścieżkę do odpowiedniego folderu obrazów. Zrobiłem to, aby uzyskać plik JSON. Możesz wypróbować tę samą metodę dla pliku obrazu, możesz odnieść się do tych przykładów

Jeśli ustawiłeś już instancję axios z baseurl jako serwer w innej domenie, będziesz musiał użyć pełnej ścieżki do statycznego serwera plików, na którym wdrażasz aplikację internetową.

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

Jeśli obraz zostanie znaleziony, odpowiedź będzie wynosić 200, a jeśli nie, będzie to 404.

Ponadto, jeśli plik obrazu znajduje się w folderze zasobów wewnątrz src, możesz wykonać wymaganie, pobrać ścieżkę i wykonać powyższe wywołanie z tą ścieżką.

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

To działa dobrze:

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

Możesz odesłać ten link, aby sprawdzić, czy istnieje plik obrazu z 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'`;
    } } ```