erklärung - html tags liste




HTML, wenn das Bild nicht gefunden wird (8)

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 unschönes leeres Quadrat angezeigt.

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

Wie kann das gemacht werden?


Der übliche Weg, um mit diesem Szenario umzugehen, besteht darin, das alt Tag auf etwas Bedeutungsvolles zu setzen.

Wenn Sie stattdessen ein Standardbild verwenden möchten, empfehle ich die Verwendung einer serverseitigen Technologie zur Bereitstellung Ihrer Bilder, die in einem ähnlichen Format wie folgt aufgerufen wird:

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

In der ImageHandler.aspx Code, fangen Sie alle Datei nicht gefunden Fehler und servieren Sie Ihre default.jpg statt.


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

<img id="currentPhoto" src="SomeImage.jpg" onerror="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.


Ich habe ein Eltern-Div um das Bild hinzugefügt und den folgenden onerror-Event-Handler benutzt, um das Originalbild auszublenden, da im IE nach der Verwendung des Alt-Attributs immer noch ein hässliches image-not-found-Bild angezeigt 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>

Ich wollte den von <img> -Tag belegten Platz ausblenden, damit dies für mich funktionierte

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


Nun, du kannst es versuchen.

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

Das hat für mich funktioniert. lass mich von dir wissen.


Ok, aber ich benutze diesen Weg, so dass jedes Mal, wenn das Originalbild nicht verfügbar ist, du dein Standardbild laden kannst, welches dein Lieblings-Smiley oder Bild sein könnte. Sorry! Nicht verfügbar, aber falls beide Bilder fehlen, können Sie Text zur Anzeige verwenden. wo kannst du auch dann 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';">

Versuchen Sie es mit border=0 im img Tag, damit das hässliche Quadrat verschwindet.

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


Wenn Sie anstelle eines Textes ein alternatives Bild wünschen, 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";
}




html