Was ist der gültige Weg, um ein Bild ohne src einzuschließen?

Ich habe ein Bild, das ich später dynamisch mit einem src mit Javascript füllen werde, aber der Einfachheit halber möchte ich, dass das Bild-Tag beim Seitenladen vorhanden ist, aber nichts anzeigt. Ich weiß, dass <img src='' />es ungültig ist. Wie geht das am besten?

Während es keine gültige Möglichkeit gibt, die Quelle eines Bildes wegzulassen, gibt es Quellen, die keine Servertreffer verursachen. Ich hatte kürzlich ein ähnliches Problem mit iframes und war fest entschlossen //:0, die beste Option zu sein. Nicht wirklich!

Wenn Sie mit //(Protokoll weglassen) beginnen, wird das Protokoll der aktuellen Seite verwendet, um Warnungen vor "unsicherem Inhalt" auf HTTPS-Seiten zu vermeiden. Das Überspringen des Hostnamens ist nicht erforderlich, verkürzt ihn jedoch. Schließlich stellt ein Port von :0sicher, dass keine Serveranforderung gestellt werden kann (gemäß Spezifikation kein gültiger Port).

Dies ist die einzige URL, die ich gefunden habe und die in keinem Browser Server-Treffer oder Fehlermeldungen verursacht hat. Die übliche Auswahl - javascript:void(0)- führt in IE7 zu einer Warnung "Unsicherer Inhalt", wenn sie auf einer über HTTPS bereitgestellten Seite verwendet wird. Jeder andere Port verursachte einen Serverversuch, selbst bei ungültigen Adressen. (Einige Browser stellen einfach die ungültige Anfrage und warten, bis sie eine Zeitüberschreitung haben.)

Dies wurde in Chrome, Safari 5, FF 3.6 und IE 6/7/8 getestet, aber ich würde erwarten, dass es in jedem Browser funktioniert, da es die Netzwerkschicht sein sollte, die jede versuchte Anforderung abbricht.

Eine andere Möglichkeit besteht darin, ein leeres Bild einzubetten. Jedes Bild, das Ihrem Zweck entspricht, reicht aus, aber das folgende Beispiel codiert ein GIF mit nur 26 Byte - von http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

Bearbeiten basierend auf dem Kommentar unten:

Natürlich müssen Sie die Anforderungen Ihres Browsers berücksichtigen. Es ist keine Unterstützung für IE7 oder weniger bemerkenswert. http://caniuse.com/datauri

Heutzutage ist meiner Meinung nach der beste kurze, vernünftige und gültige Weg für ein leeres img src wie folgt:

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

Das zweite Beispiel zeigt "Alternativer Text" (plus Symbol für defekte Bilder in Chrome und IE).

"data:,"ist eine gültige URI. Ein leerer Medientyp ist standardmäßig text/plain. Es stellt also eine leere Textdatei dar und entspricht"data:text/plain,"

Ich empfehle, die Elemente dynamisch hinzuzufügen. Wenn Sie jQuery oder eine andere JavaScript-Bibliothek verwenden, ist dies ganz einfach:

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

schau dir auch an prependund append. Andernfalls können Sie ein Dummy-Bild verwenden, z. B. ein transparentes 1px-GIF oder ein PNG, wenn Sie ein solches Bild-Tag haben und es validieren möchten.

Ich habe das schon eine Weile nicht mehr gemacht, aber ich musste dasselbe einmal durchmachen.

<img src="about:blank" alt="" />

Ist mein Favorit - der //:0impliziert, dass Sie versuchen werden, eine HTTP / HTTPS-Verbindung zum Ursprungsserver an Port Null (dem tcpmux-Port?) Herzustellen - was wahrscheinlich harmlos ist, aber ich würde es sowieso lieber nicht tun. Heck, der Browser kann den Port Null sehen und nicht einmal eine Anfrage senden. Aber ich möchte immer noch lieber, dass es nicht so angegeben wird, wenn Sie das wahrscheinlich nicht meinen.

Wie auch immer, das Rendern von about:blankist in allen von mir getesteten Browsern sehr schnell. Ich habe es einfach in den W3C-Validator geworfen und es hat sich nicht beschwert, also könnte es sogar gültig sein.

Edit : Tu das nicht; Es funktioniert nicht in allen Browsern (es wird ein Symbol für ein fehlerhaftes Bild angezeigt, wie in den Kommentaren zu dieser Antwort angegeben). Verwenden Sie die <img src='data:...unten stehende Lösung. Oder wenn Sie sich nicht um die Gültigkeit kümmern, aber dennoch überflüssige Anforderungen an Ihren Server vermeiden möchten, können Sie <img alt="" />auf kein src-Attribut verzichten. Aber das ist UNGÜLTIGES HTML, also wähle das sorgfältig aus.

Testseite mit einer ganzen Reihe verschiedener Methoden: http://desk.nu/blank_image.php - wird mit allen möglichen Doctypes und Inhaltstypen bereitgestellt. - Verwenden Sie, wie in den Kommentaren unten erwähnt, die neue Testseite von Mark Ormston unter: http://memso.com/Test/BlankImage.html

Wie in Kommentaren geschrieben, ist diese Methode falsch.

Ich habe diese Antwort vorher nicht gefunden, aber gemäß den W3- Spezifikationen srcwäre ein gültiges leeres Tag ein Ankerlink #.

Beispiel : src="#",src="#empty"

Seite wird erfolgreich validiert und es werden keine zusätzlichen Anforderungen gestellt.

Ich habe festgestellt, dass das einfache Setzen des src auf eine leere Zeichenfolge und das Hinzufügen einer Regel zu Ihrem CSS zum Ausblenden des Symbols für fehlerhafte Bilder einwandfrei funktioniert.

[src=''] {
    visibility: hidden;
}

Wenn Sie das src-Attribut leer lassen, sendet der Browser eine Anfrage an die aktuelle Seiten-URL. Fügen Sie immer 1 * 1 transparentes img in das src-Attribut ein, wenn Sie keine URL möchten

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

Ich habe das gefunden mit:

<img src="file://null">

wird keine Anfrage stellen und korrekt validieren.

Die Browser blockieren einfach den Zugriff auf das lokale Dateisystem.

Im Konsolenprotokoll in Chrome wird möglicherweise ein Fehler angezeigt, z. B.:

Not allowed to load local resource: file://null/

Verwenden Sie eine wirklich leere, gültige und hochkompatible SVG-Datei, die auf diesem Artikel basiert :

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

Die Standardgröße beträgt 300x150px, wie dies bei jeder SVG-Datei der Fall ist. Sie können jedoch in den imgStandardstilen Ihres Elements damit arbeiten, wie Sie es in der praktischen Implementierung möglicherweise in jedem Fall benötigen würden.

Aufbauend auf der Antwort von Ben Blank war die einzige Möglichkeit, diese im w3-Validator zu validieren, wie folgt:

<img src="/./.:0" alt="">`

Ich persönlich benutze ein about:blank srcund beschäftige mich mit dem Symbol für defekte Bilder, indem ich die Deckkraft des imgElements auf setze 0.

<img src="invis.gif" />

Wobei invis.gif ein transparentes GIF mit einem Pixel ist. Dies wird in zukünftigen Browserversionen nicht mehr funktionieren und funktioniert seit den 90er Jahren in älteren Browsern.

png sollte auch funktionieren, aber in meinen Tests war das GIF 43 Bytes und das PNG 167 Bytes, also gewann das GIF.

ps vergiss kein alt tag, validatoren mögen sie auch.

Einfach so:

<img id="give_me_src"/>