zobacz, czy src z img istnieje

Question

kiedy umieszczam tag img, tworzę atrybut src dynamicznie. Czy istnieje sposób testowania czy src (ścieżka gdzie obraz znajduje) faktycznie istnieje w javascript, aby zapobiec jej wystąpieniu:

Answer 1

Można użyć zdarzenia error:

var im = document.getElementById('imageID'); // or select based on classes 
im.onerror = function(){ 
    // image not found or change src like this as default image: 

    im.src = 'new path'; 
}; 

Inline Wersja:

<img src="whatever" onError="this.src = 'new default path'" /> 

Albo

<img src="whatever" onError="doSomething();" /> 

---

<img> tag obsługuje tych zdarzeń:

• abort (onAbort)
• error (onError)
• load (onLoad)

Więcej informacji:

• JavaScript Events
• jQuery's error

Answer 2

można dokonać wcześniejszej rozmowy AJAX (z head metody) i zobaczyć kod zwrotny serwer lub użyć onerror zdarzenie, aby zmienić adres URL lub ukryć, np

<img src="notexist.jpg" onerror="this.style.visibility = 'hidden'"> 

(Użyłem atrybut inline tylko wyjaśnić ideę)

Answer 3

Teraz zbliża to w niewłaściwy sposób.
Po wygenerowaniu linków za pomocą skryptu po stronie serwera sprawdź, czy plik istnieje, czy nie (na przykład za pomocą file_exists() w PHP).

Nie należy polegać na JavaScript, gdy można to zrobić po stronie serwera, ponieważ JavaScript można zmienić i wyłączyć.

Zadaj sobie pytanie, w jaki sposób generujesz atrybuty src= i sprawdź, czy plik istnieje i czy nie, i podaj alternatywę.

Answer 4

Jeśli tworzysz src dynamicznie z javascript można użyć to:

var obj = new Image(); 
 
    obj.src = "http://www.javatpoint.com/images/javascript/javascript_logo.png"; 
 

 
if (obj.complete) { 
 
    alert('worked'); 
 
} else { 
 
    alert('doesnt work'); 
 
}