HTML, jeśli nie znaleziono obrazu

99

Mam obraz na stronie HTML:

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

Jeśli obraz nie zostanie znaleziony na serwerze, pokazuje brzydki pusty kwadrat.

Chcę, aby jeśli obraz nie został znaleziony, nie wyświetlił niczego lub innego domyślnego obrazu, o którym wiem, że znajduje się na serwerze.

Jak można to zrobić?

David19801
źródło
2
Dostaję favicony, niektóre strony ich nie mają.
David19801
W takim przypadku może najpierw wykonać żądanie po stronie serwera lub klienta, aby zobaczyć, jaki kod stanu wraca?
Pekka
Próbuję nie używać js, ponieważ nie lubię powolnych witryn i jest zbyt wiele faviconów, aby to zrobić po stronie serwera, serwer zostałby zbanowany.
David19801
9
kto jest idiotą, który powiedział ci, że javascript spowolni działanie witryny?
Qchmqs
@Pekka 웃 Oczywiście powinieneś mieć działające linki na stronie. A co, jeśli linki nie są w Twojej witrynie, ale w witrynie innej osoby? A co, jeśli pochodzą ze zdalnego magazynu danych i ich pobranie zajmuje trochę czasu?
leetheguy

Odpowiedzi:

269

Najlepszy sposób na rozwiązanie problemu:

<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

onerror to dla ciebie dobra rzecz :)

Po prostu zmień nazwę pliku obrazu i spróbuj sam.

Robby Shaw
źródło
4
W połączeniu z przydatnym tagiem alt to świetny sposób na rozwiązanie problemu!
mlibby
2
Niesamowity! idealne rozwiązanie
Emanuele Pavanello
5
Jeśli Default.jpg nie jest dostępny, skończysz w niekończącej się pętli. Powinieneś dodać czekif (this.src != 'Default.jpg')
dehlen
7
Aby uniknąć nieskończonych pętli i lepiej niż if: this.onerror=null;jak podano poniżej przez @Sudarshan.
Guillaume F.
każdy, kto pracuje z reaguje, może
polecić
18

Cóż, możesz tego spróbować.

  <object data="URL_TO_Default_img.png" type="image/png">
   <img src="your_original_image.png" />
  </object>

to działało dla mnie. daj mi znać o sobie.

Sudarshan Kalebere
źródło
5
Wydaje się, że działa we wszystkich głównych przeglądarkach. Po prostu zamień domyślne i oryginalne. Tak więc ten obiekt renderuje oryginalny obraz i domyślny obraz img
Evgeny
10

Ok, ale lubię używać tego sposobu, aby za każdym razem, gdy oryginalny obraz nie był dostępny, można załadować domyślny obraz, który może być Twoim ulubionym uśmieszkiem lub obrazem z napisem Przepraszamy! Niedostępne, ale w przypadku, gdy brakuje obu obrazów, możesz użyć tekstu do wyświetlenia. gdzie możesz wtedy też się uśmiechnąć. spójrz na prawie każdy przypadek.

<img src="path_to_original_img/img.png"  alt="Sorry! Image not available at this time" 
       onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">
Sudarshan Kalebere
źródło
1
Nie używaj alt dla tekstów błędów, jeśli chcesz, aby strony były poprawnie analizowane przez wyszukiwarki. Wyszukiwarki mogą nieprawidłowo indeksować dane dotyczące treści.
varela,
Co robi <?=base_url()?>? Dlaczego zaskakująco dodajesz kod po stronie serwera i oparty na strukturze?
Nico Haase
@NicoHaase swój adres URL z frameworka php, cóż, zawsze możesz napisać własny adres URL obrazu, podałem przykład, który nie oznacza, że ​​powinieneś go skopiować i wkleić lub skoncentrować się na tym adresie URL, dołączasz swój adres URL, co oznacza. Aby wyjaśnić, musisz podać przykład, więc zrobiłem.
Sudarshan Kalebere
3

Tutaj Sprawdź poniższy fragment kodu, w którym brakuje mi nazwy obrazu. Tak więc tylko z tego powodu pokazuje alternatywny obraz jako obraz nie znaleziony (404.svg).

<img id="currentPhoto" src="https://www.ccrharrow.org/Images/content/953/741209.pg" onerror="this.src='https://www.unesale.com/ProductImages/Large/notfound.png'" alt="">

krishna amarghade
źródło
1

Zwykłym sposobem na obsłużenie tego scenariusza jest ustawienie altznacznika na coś znaczącego.

Jeśli zamiast tego chcesz uzyskać obraz domyślny, sugeruję użycie technologii po stronie serwera do wyświetlania obrazów, o nazwie przy użyciu formatu podobnego do:

<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />

W ImageHandler.aspxkodzie wyłap wszelkie błędy związane z nieodnalezieniem pliku i wyświetl default.jpgzamiast tego swój plik .

Widor
źródło
1

Możesz wyświetlić tekst alternatywny, dodając alt:

<img src="my_img.png" alt="alternative text" border="0" /> 
juankysmith
źródło
może ten kwadrat pochodzi z div (lub innego tagu), który zawiera Twój img
juankysmith
alt nie działa, jeśli styl wyświetlania img to „blok”
JohnFlux
1

Dodałem nadrzędny element div dookoła obrazu i użyłem następującego modułu obsługi zdarzeń onerror, aby ukryć oryginalny obraz, ponieważ w IE nadal był brzydki obraz-nie znaleziono obrazu wyświetlany po użyciu atrybutu alt:

<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
        <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>
Patrick Koorevaar
źródło
1

Alternatywnie, jeśli obraz nie istnieje - w ogóle nic nie pokazuj. (czego szukałem)

Możesz zamienić funkcję z odpowiedzi Robby'ego Shawa w atrybucie „onerror” na „this.remove ()”.

<img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

Bim
źródło
0

Spróbuj użyć border=0w imgtagu, aby brzydki kwadrat zniknął.

<img src="someimage.png" border="0" alt="some alternate text" />

Aziz Shaikh
źródło
0

Chciałem ukryć miejsce zajmowane przez <img>tag, więc to zadziałało

<img src = "source.jpg" alt = "" >

Divyanshu Jimmy
źródło
0

Jeśli chcesz mieć alternatywny obraz zamiast tekstu, możesz równie dobrze użyć php:

$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
     echo "<img src='".$file."' border="0" />";
}else if($alt_file){
     // the alternative file too might not exist not exist
     echo "<img src='".$alt_file."' border="0" />";
}else{
  echo "smily face";
}
stephen komu
źródło
0

prosty sposób na rozwiązanie tego problemu, wystarczy dodać obraz tła.

vikas dhere
źródło
0

wypróbuj PHP

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}
SIAMWEBSITE
źródło
-1

dla mnie działa tak, że jeśli nie chcesz używać atrybutu alt, jeśli obraz się zepsuje, możesz użyć tego fragmentu kodu i odpowiednio ustawić.

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>
Nasir Shafique
źródło
-2

Ten pracował dla mnie. używając srcset. Właśnie się o tym dowiedziałem, więc nie wiem, czy przeglądarki go obsługują, ale zadziałało. Spróbuj, a później daj mi swoją opinię.

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />
stephen komu
źródło
-21

Rozwiązanie - usunąłem elementy wysokości i szerokości z img, a tekst alt działał.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

DO

<img src="smiley.gif" alt="Smiley face" />

Dziękuję wam wszystkim.

David19801
źródło
18
Więc podałeś sobie „poprawną odpowiedź”, ale odpowiedziałeś odpowiedzią niezwiązaną z pytaniem, GG WP.
Jean-Paul
och, ten facet przyjął własną odpowiedź spośród wszystkich poprawnych odpowiedzi hahaha, dobry sposób na pielęgnowanie siebie.
Sudarshan Kalebere,
To nie pierwszy raz: D stackoverflow.com/a/12768098/1545917
Ghilas BELHADJ
Ta odpowiedź nie dostarcza alternatywnego obrazu.
Patrick Knott
@ david19801 chcesz wyjaśnić?
P Satish Patro