HTML, wenn das Bild nicht gefunden wird

Ich habe ein Bild in einer HTML-Seite:

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

Wenn das Bild nicht auf dem Server gefunden wird, wird ein hässliches leeres Quadrat angezeigt.

Ich möchte es so gestalten, dass, wenn ein Bild nicht gefunden wird, nichts oder ein anderes Standardbild angezeigt wird, von dem ich weiß, dass es sich definitiv auf dem Server befindet.

Wie kann das gemacht werden?

Der beste Weg, um Ihr Problem zu lösen:

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

onerror ist eine gute Sache für dich :)

Ändern Sie einfach den Namen der Bilddatei und versuchen Sie es selbst.

Nun, du kannst es versuchen.

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

das hat bei mir funktioniert. Lass es mich über dich wissen.

Ok, aber ich verwende diese Methode gerne, damit Sie, wenn das Originalbild nicht verfügbar ist, Ihr Standardbild laden können, das möglicherweise Ihr Lieblings-Smiley oder Bild ist und "Sorry!" Sagt. Nicht verfügbar, aber falls beide Bilder fehlen, können Sie Text zur Anzeige verwenden. wo kannst du dann auch smiley. Schauen Sie sich fast jeden Fall an.

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

Hier Überprüfen Sie unten das Code-Snippet, in dem ich den Bildnamen falsch geschrieben habe. Nur aus diesem Grund wird das alternative Bild als nicht gefundenes Bild (404.svg) angezeigt.

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

Die übliche Methode, um mit diesem Szenario umzugehen, besteht darin, das altTag auf einen sinnvollen Wert zu setzen.

Wenn Sie stattdessen ein Standardbild möchten, empfehle ich die Verwendung einer serverseitigen Technologie zum Bereitstellen Ihrer Bilder, die in einem ähnlichen Format wie das folgende aufgerufen wird:

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

ImageHandler.aspxFangen Sie im Code alle nicht gefundenen Dateifehler ab und stellen Sie default.jpgstattdessen Ihre bereit.

Sie können einen alternativen Text anzeigen, indem Sie Folgendes hinzufügen alt:

<img src="my_img.png" alt="alternative text" border="0" /> 

Ich habe ein übergeordnetes Div um das Bild hinzugefügt und den folgenden onerror-Ereignishandler verwendet, um das Originalbild auszublenden, da im IE nach Verwendung des alt-Attributs immer noch ein hässliches Bild angezeigt wurde, das nicht gefunden wurde:

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

Für die Alternative, wenn das Bild nicht existiert - zeigen Sie überhaupt nichts. (was ich gesucht habe)

Sie können die Funktion von Robby Shaws Antwort im Attribut "onerror" gegen "this.remove ()" austauschen.

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

Versuchen Sie es border=0in derimg Tag, damit das hässliche Quadrat verschwindet.

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

Ich wollte den Platz, den das <img>Tag einnimmt, verstecken, damit das für mich funktioniert

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

Wenn Sie ein alternatives Bild anstelle eines Textes möchten, können Sie auch PHP verwenden:

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

Einfacher Weg, um dies zu handhaben, fügen Sie einfach ein Hintergrundbild hinzu.

versuchen Sie es mit PHP

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}

Es funktioniert für mich, wenn Sie das Alt-Attribut nicht verwenden möchten, wenn das Bild unterbrochen wird, können Sie diesen Code verwenden und entsprechend festlegen.

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>

Dieser hat für mich gearbeitet. mit dem srcset. Ich habe gerade davon erfahren, daher weiß ich nicht, ob Browser es unterstützen, aber es hat bei mir funktioniert. Probieren Sie es aus und geben Sie mir später Ihr Feedback.

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />

Lösung - Ich habe die Höhen- und Breitenelemente des Bilds entfernt und dann hat der Alternativtext funktioniert.

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

ZU

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

Danke euch allen.