Überprüfen Sie mithilfe von JavaScript, ob das Bild auf dem Server vorhanden ist.

Gibt es eine Möglichkeit, mithilfe von Javascript festzustellen, ob eine Ressource auf dem Server verfügbar ist? Zum Beispiel habe ich Bilder 1.jpg - 5.jpg in die HTML-Seite geladen. Ich möchte jede Minute eine JavaScript-Funktion aufrufen, die ungefähr den folgenden Scratch-Code ausführt ...

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

Gedanken? Vielen Dank!

Sie könnten etwas verwenden wie:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Natürlich können Sie jQuery / Similar verwenden, um Ihre HTTP-Anforderung auszuführen.

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

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

    })

Sie können die grundlegende Funktionsweise von Bildvorladern verwenden, um zu testen, ob ein Bild vorhanden ist.

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

Sie können einfach überprüfen, ob das Bild geladen wird oder nicht, indem Sie die integrierten Ereignisse verwenden, die für alle Bilder bereitgestellt werden.

Das onloadundonerror Veranstaltungen werden Ihnen sagen , ob das Bild erfolgreich geladen wurde oder ein Fehler ist aufgetreten:

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

Wenn jemand auf diese Seite kommt, um dies in einem React- basierten Client zu tun , können Sie Folgendes tun: Dies war ein Antwort-Original, das Sophia Alpert vom React-Team hier bereitgestellt hat

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

Wenn Sie ein Image-Tag erstellen und es dem DOM hinzufügen, sollte entweder das Onload- oder das Onerror-Ereignis ausgelöst werden. Wenn ein Fehler ausgelöst wird, ist das Image nicht auf dem Server vorhanden.

Ein besserer und moderner Ansatz besteht darin, mithilfe der ES6- Abruf-API zu überprüfen, ob ein Bild vorhanden ist oder nicht:

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

Stellen Sie sicher, dass Sie entweder Anfragen mit demselben Ursprung stellen oder CORS auf dem Server aktiviert ist.

Sie können diese JS-Funktion aufrufen, um zu überprüfen, ob eine Datei auf dem Server vorhanden ist:

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

Grundsätzlich antwortet eine vielversprechende Version von @espascarello und @adeneo mit einem Fallback-Parameter:

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.

Hinweis: Ich persönlich mag die fetchLösung vielleicht mehr, aber sie hat einen Nachteil: Wenn Ihr Server auf eine bestimmte Weise konfiguriert ist, kann er 200/304 zurückgeben, auch wenn Ihre Datei nicht vorhanden ist. Dies wird andererseits die Arbeit erledigen.

Sie können dies mit Ihren Axios tun, indem Sie den relativen Pfad zum entsprechenden Bilderordner festlegen. Ich habe dies getan, um eine JSON-Datei zu erhalten. Sie können dieselbe Methode für eine Bilddatei ausprobieren. Sie können sich auf diese Beispiele beziehen

Wenn Sie bereits eine Axios-Instanz mit baseurl als Server in einer anderen Domäne festgelegt haben, müssen Sie den vollständigen Pfad des statischen Dateiservers verwenden, auf dem Sie die Webanwendung bereitstellen.

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

Wenn das Bild gefunden wird, lautet die Antwort 200 und wenn nicht, 404.

Wenn sich die Bilddatei im Assets-Ordner in src befindet, können Sie eine Anforderung ausführen, den Pfad abrufen und den obigen Aufruf mit diesem Pfad ausführen.

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

Das funktioniert gut:

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

Über diesen Link können Sie überprüfen, ob eine Bilddatei mit JavaScript vorhanden ist.

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