So zeigen Sie Alternativtext für ein Bild in Chrom an

Das Bild mit ungültiger Quelle zeigt in Firefox einen alternativen Text an, jedoch nicht in Chrom, es sei denn, die Breite eines Bildes wird angepasst.

  <img height="90" width="90"
    src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
    alt="Image Not Found"/>

Wie zeige ich den Alternativtext für ein Bild an?

Wenn ich richtig bin, ist das ein Fehler in WebKit (nach dieser ). Ich bin mir nicht sicher, ob Sie viel tun können. Entschuldigen Sie die schwache Antwort.

Es gibt jedoch eine Arbeit, die Sie verwenden können. Wenn Sie das titleAttribut zu Ihrem Bild hinzufügen (z. B. title="Image Not Found"), funktioniert es.

Sie können das titleAttribut verwenden.

<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />

Ja, es handelt sich um ein Problem im Webkit, das auch in Chrom gemeldet wird: http://code.google.com/p/chromium/issues/detail?id=773 Es ist seit 2008 da ... und immer noch nicht behoben !!

Ich benutze ein Stück Javacsript und jQuery, um mich darum zu kümmern.

function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");

Wenn Sie nur ein paar Bilder wollen:

addShowAlt("#myImgID");

Verwenden Sie das Titelattribut anstelle von alt

<img
  height="90"
  width="90"
  src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
  title="Image Not Found"
/>

Hier ist eine einfache Problemumgehung in jQuery. Sie können es als Benutzerskript implementieren, um es auf jede angezeigte Seite anzuwenden.

$(function () {
  $('img').live('mouseover', function () {
    var img = $(this); // cache query
    if (img.title) {
      return;
    }
    img.attr('title', img.attr('alt'));
  });
});

Ich habe dies auch als Chrome-Erweiterung namens alt implementiert . Da es verwendet wird jQuery.live, funktioniert es auch mit dynamisch geladenen Inhalten. Ich habe diese Erweiterung zurückgezogen und aus dem Chrome Store entfernt.

Verschiedene Browser (falsch) behandeln dies auf verschiedene Arten. Die Verwendung von title (ein alter IE-Standard) ist nicht besonders geeignet, da das title-Attribut ein Mouseover-Effekt ist. Die obige jQuery-Lösung (Alexis) scheint auf dem richtigen Weg zu sein, aber ich glaube nicht, dass der 'Fehler' an einem Punkt auftritt, an dem er abgefangen werden könnte. Ich hatte Erfolg, indem ich am src durch sich selbst ersetzte und dann den Fehler abfing:

$('img').each(function()
{
    $(this).error(function()
    {
        $(this).replaceWith(this.alt);
    }).attr('src',$(this).prop('src'));
});

Dies hat, wie im Alexis-Beitrag, den Vorteil, dass das fehlende Bild img entfernt wird.

Internet Explorer 7 (und früher) zeigt den Wert des alt-Attributs als QuickInfo an, wenn Sie mit der Maus über das Bild fahren. Dies ist NICHT das richtige Verhalten gemäß der HTML-Spezifikation. Stattdessen sollte das title-Attribut verwendet werden. Quelle: http://www.w3schools.com/tags/att_img_alt.asp

Um den Alt-Text fehlender Bilder anzuzeigen, müssen wir einen solchen Stil hinzufügen. Ich denke, dafür muss kein zusätzliches Javascript hinzugefügt werden.

.Your_Image_Class_Name {
  font-size: 14px;
}

Es ist Arbeit für mich. Genießen!!!!

Sie können das Tag-Attribut dem Tag hinzufügen. Ich hoffe, es wird funktionieren.

<img src="smiley.gif" title="Smiley face" width="42" height="42">

Ich benutze dies, es funktioniert mit PHP ...

<span><?php
if (file_exists("image/".$data['img_name'])) {
  ?>
  <img src="image/<?php echo $data['img_name']; ?>" width="100" height="100">
  <?php
}else{
  echo "Image Not Found";
}>?
</span>

Im Wesentlichen sucht der Code nach der Datei . Die $dataVariable wird mit unserem Array verwendet und nimmt dann tatsächlich die gewünschte Änderung vor. Wenn es nicht gefunden wird, wird eine Ausnahme ausgelöst.