Qual è il modo valido per includere un'immagine senza src?

234

Ho un'immagine che popolerò dinamicamente con un src in seguito con javascript ma per semplicità voglio che il tag immagine esista a pageload ma semplicemente non visualizzi nulla. So che <img src='' />non è valido, quindi qual è il modo migliore per farlo?

html validation

— jhchen
fonte

4

Questa è una domanda relativamente vecchia, ma vale la pena considerare che un'immagine senza src è essenzialmente priva di significato ed è per questo che la specifica dice che l'immagine deve avere un src che punta a qualche risorsa incorporata in primo luogo. Se stai pensando alla validità e / o alla semantica, sei molto meglio servito omettendo completamente l'immagine e aggiungendola dopo il fatto, poiché l'HTML non fornisce un modo per specificare un'immagine segnaposto che verrà popolata in seguito.

— BoltClock

1

Nell'usare il plugin jQuery di Lazy caricamento di Mika Tuupola, usa markup '<img class = "lazy" data-original = "img / example.jpg" width = "640" height = "480">', quindi, in un certo senso, tu deve puntare a una fonte, ma non deve essere fatto con l'attributo src.

— iWillGetBetter,

È possibile utilizzare div elemento invece di esso si prega di vedere questo => stackoverflow.com/a/5513934/1395101

— Amin Ghaderi

237

Anche se non esiste un modo valido per omettere la fonte di un'immagine, ci sono fonti che non causeranno hit del server. Di recente ho avuto un problema simile con iframes e deciso //:0di essere l'opzione migliore. No davvero!

A partire da //(omettendo il protocollo) si utilizza il protocollo della pagina corrente, evitando avvisi di "contenuto non sicuro" nelle pagine HTTPS. Saltare il nome host non è necessario, ma lo rende più breve. Infine, una porta :0garantisce che non è possibile effettuare una richiesta del server (non è una porta valida, secondo le specifiche).

Questo è l'unico URL che ho trovato non ha causato alcun hit sul server o messaggi di errore in nessun browser. La solita scelta - javascript:void(0)- genererà un avviso di "contenuto non sicuro" in IE7 se utilizzato su una pagina pubblicata tramite HTTPS. Qualsiasi altra porta ha causato un tentativo di connessione al server, anche per indirizzi non validi. (Alcuni browser semplicemente inviano la richiesta non valida e attendono il timeout.)

Questo è stato testato in Chrome, Safari 5, FF 3.6 e IE 6/7/8, ma mi aspetto che funzioni in qualsiasi browser, poiché dovrebbe essere il livello di rete che uccide qualsiasi richiesta tentata.

— Ben vuoto
fonte

16

Questa risposta può causare ad esempio che il firewall ti avverte dell'accesso alla porta 0. Oppure potrebbe causare un registro di sicurezza del server. La risposta alla consulenza about:blankè probabilmente una soluzione migliore.

— Florian Margaine,

10

Questo sta causando la visualizzazione di un'icona di immagine rotta per me. Qualcun altro sta vedendo questo? Sto usando l'ultimo Firefox (27).

— dmikester1,

10

Anche questo fallisce validatore w3c: valore errato //: 0 per l'attributo src sull'elemento img: host non valido: host vuoto.

— giovedì

Questo non funziona: ho un'applicazione ASP.NET MVC 4 che contiene un plug-in della galleria di immagini chiamato clearing. Il plugin crea le immagini in modo dinamico e mette //: 0 o lo src fino a quando l'immagine non viene effettivamente recuperata. Ciò stava facendo chiamare due volte l'azione dell'indice del mio homecontroller. Quindi attenzione.

— jpgrassi,

2

In Firefox 38, questo approccio attiva il onerrorgestore dell'immagine .

— Nate Whittaker,

221

Un'altra opzione è incorporare un'immagine vuota. Qualsiasi immagine adatta al tuo scopo lo farà, ma il seguente esempio codifica una GIF di soli 26 byte - da http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

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

Modifica in base al commento qui sotto:

Naturalmente, è necessario considerare i requisiti di supporto del browser. Nessun supporto per IE7 o inferiore è notevole. http://caniuse.com/datauri

— Isius
fonte

14

Grande idea! Per me, tuttavia, questo uccide l'elemento dell'immagine - se qualcuno ha bisogno di altri aspetti imgdell'elemento per mostrare, ad esempio, lo sfondo e il bordo, prova src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="quale è preso da una GIF trasparente 1px x 1px che ho fatto io Photoshop ho spinto attraverso base64-image.de

— user56reinstatemonica8

4

Potresti pensare due volte a integrare le tue risorse con gli URI dei dati: mobify.com/blog/data-uris-are-slow-on-mobile

— shawnjan,

1

La fattibilità di questa opzione dipende dai browser che devi supportare: caniuse.com/datauri

— Jeff Clemens

6

Ecco un PNG trasparente da 1 pixel:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=

— Keavon

2

URL di immagine trasparente che ha funzionato per me -data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

— Vikram Rao,

34

In questi giorni IMHO il miglior modo breve, sano e valido per un img src vuoto è come questo:

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

Il secondo esempio mostra "Testo alternativo" (più un'icona a forma di immagine spezzata in Chrome e IE).

"data:,"è un URI valido. Per impostazione predefinita, un tipo di supporto vuoto è text/plain. Quindi rappresenta un file di testo vuoto ed è equivalente a"data:text/plain,"

OT: Tutti i browser comprendono chiaramente alt. Puoi ometterlo ="", è implicito per le specifiche HTML.

— jj
fonte

1

Nessun errore HTML con controllo validatore W3C. Nessuna richiesta non necessaria. 👍 Sembra essere il modo valido per farlo.

— Kai Noack,

Migliore! Un'altra cosa, se vuoi che si convalidi in un srcset, usasrcset="data:,x"

— Lucian Davidescu,

18

Consiglio di aggiungere dinamicamente gli elementi e, se si utilizza jQuery o altre librerie JavaScript, è abbastanza semplice:

guarda anche prepende append. Altrimenti se hai un tag immagine del genere e vuoi renderlo valido, potresti prendere in considerazione l'uso di un'immagine fittizia, come un GIF trasparente 1px o png.

— nonopolarity
fonte

7

+1 Questa è la risposta migliore. Se la sorgente dell'immagine viene impostata in modo dinamico, l'intero elemento deve essere aggiunto in modo dinamico. Se non vuoi che sia visibile fino a quando non viene impostato src, non riesco a pensare a nessuna buona ragione per cui l'elemento dovrebbe essere lì prima di quello.

— Andrew Ensley,

15

~~Non lo faccio da un po ', ma una volta ho dovuto affrontare la stessa cosa.~~

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

È il mio preferito - //:0quello implica che proverai a stabilire una connessione HTTP / HTTPS con il server di origine sulla porta zero (la porta tcpmux?) - che è probabilmente innocua, ma preferirei non farlo comunque. Diamine, il browser potrebbe vedere la porta zero e nemmeno inviare una richiesta. Ma preferirei che non fosse specificato in questo modo, quando probabilmente non è quello che intendi.

Ad ogni modo, il rendering di in about:blankrealtà è molto veloce in tutti i browser che ho testato. L'ho appena lanciato nel validatore W3C e non si è lamentato, quindi potrebbe anche essere valido.

Modifica : non farlo; non funziona su tutti i browser (mostrerà un'icona 'immagine spezzata' come indicato nei commenti per questa risposta). Usa la <img src='data:...soluzione qui sotto. O se non ti interessa la validità, ma vuoi comunque evitare richieste superflue al tuo server, puoi farlo <img alt="" />senza l'attributo src. Ma questo è INVALID HTML, quindi scegli quello con attenzione.

~~Pagina di prova che mostra un sacco di metodi diversi: http://desk.nu/blank_image.php - servito con tutti i tipi di diversi tipi di documenti e contenuti.~~ - come menzionato nei commenti seguenti, utilizzare la nuova pagina di test di Mark Ormston su: http://memso.com/Test/BlankImage.html

— Uberbrady
fonte

Sembra più pulito che lasciare che il livello di rete generi un errore.

— Denys Séguret,

Almeno sei sicuro che uno stupido firewall non chiederà il permesso di chiamare la porta 0 ...

— Denys Séguret

1

Vale la pena ricordare che questo visualizza l'icona 'immagine spezzata' su Chrome (e probabilmente anche altri browser)

— user56reinstatemonica8

1

È peggio di quanto pensassi - anche con il doctype html5 non sembra funzionare in Safari o Chrome. Ho una pagina di prova che modificherà il tipo di contenuto e il tipo di documento di una pagina, e finora il mio preferito è: <img />- un tag immagine senza l'attributo src. Questo non è valido (quindi non ha senso inserire anche il tag alt vuoto). Sto continuando a giocarci e aggiornerò la mia risposta (o barrandola) di conseguenza.

— Uberbrady,

2

Ho preso la tua pagina di prova e l'ho aggiornata, quindi è molto più evidente quando le immagini non funzionano correttamente. La vecchia immagine vuota è inclusa come esempio "Funziona sempre", oltre a una breve descrizione di ciò che stai vedendo: memso.com/Test/BlankImage.html Questo mi ha portato a capire che la GIF valida per i dati vuoti è l'unica riutilizzabile opzione per browser moderni, diversa dalla vecchia immagine gif vuota (che è ancora necessaria per il vecchio IE7 e precedenti)

— Mark Ormston

12

Come scritto nei commenti, questo metodo è sbagliato.

~~Non ho trovato questa risposta prima, ma secondo il tag vuoto valido delle specifiche W3src sarebbe un collegamento di ancoraggio #.~~

~~Esempio: src="#",src="#empty"~~

~~La pagina viene convalidata correttamente e non viene effettuata alcuna richiesta aggiuntiva.~~

— iGidas
fonte

1

Ci sono argomenti contro questo approccio? Com'è attraverso i browser?

— tremby,

18

Ho visto sia Firefox che Chrome fare una seconda richiesta quando si utilizza questo approccio, quindi non lo consiglierei.

— Marius,

5

Firefox, Chrome fanno una seconda richiesta, anche JMeter analizza img src, il che si traduce in carichi ricorsivi della pagina (fino a quando non viene raggiunta la massima profondità)

— burna,

1

In FF devi premere due volte il pulsante Indietro del browser se vuoi sfogliare la pagina perché l'URL cambia misteriosamente ..

— Kalaschni

3

Questo è chiaramente sbagliato. Chiunque legga commenti - NON UTILIZZARLO

— Shadow Wizard è Ear For You

11

Ho scoperto che semplicemente impostando src su una stringa vuota e aggiungendo una regola al CSS per nascondere l'icona dell'immagine rotta funziona perfettamente.

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

— Shawn Walton
fonte

[ng-src = ''] {visibilità: nascosto; } se stai usando la direttiva ng-src in angularjs

— Ivan Paredes,

1

Nota che src deve essere impostato su '', non deve essere indefinito.

— Vincent Hoch-Drei,

Se non sbaglio, verrà comunque eseguita una richiesta

— Nico

9

se mantieni l'attributo src vuoto il browser invierà la richiesta all'URL della pagina corrente aggiungi sempre 1 * 1 img trasparente nell'attributo src se non vuoi alcun url

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

— Prathamesh Rasam
fonte

1

Questo verrà visualizzato come un punto nero in alcuni browser.

— tomasz86,

IE8 di sicuro, e le vecchie versioni di Firefox in base alle stackoverflow.com/questions/9126105/...

— tomasz86

1

questo src ha data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==funzionato però

— Max Yari il

9

Ho scoperto che usando:

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

non farà una richiesta e convalida correttamente.

I browser semplicemente bloccheranno l'accesso al file system locale.

Ma potrebbe esserci un errore visualizzato nel registro della console in Chrome, ad esempio:

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

— tenkod
fonte

2

Ti interessa spiegare il downvote? Si noti che non sto raccomandando di utilizzare questo metodo solo fornendo un caso di discussione. E sta soddisfacendo i requisiti della domanda per validare correttamente e non fare richieste aggiuntive.

— tenkod,

8

Usa un SVG veramente vuoto, valido e altamente compatibile, basato su questo articolo :

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

La dimensione predefinita sarà 300x150px come qualsiasi SVG, ma puoi lavorarci negli imgstili predefiniti degli elementi, come è possibile che tu abbia bisogno in ogni caso nell'implementazione pratica.

— mystrdat
fonte

Grazie per aver aggiornato la tua risposta, ma sospetto che la compatibilità sia ancora peggiore per questo, rispetto all'altra soluzione data-uri, dato che usi svg che non era compatibile fino a IE9. Fortunatamente, è passato un po 'di tempo da quando ho dovuto supportare IE legacy, ma è ancora rilevante per alcune persone.

— funkylaundry,

Ma questo non presenta gli stessi problemi di questo articolo? dev.mobify.com/blog/data-uris-are-slow-on-mobile . Sto pensando che l'opzione <img src = "about: blank"> con css img [src = "about: blank"] {opacity: 0} sia la migliore. Oppure, se quel livello di selettore CSS non è supportato nei browser più vecchi, basta assegnare al tag img una classe come "load-in" o qualcosa del genere. Meglio ancora, dagli la classe, usa JavaScript per scambiare i dati-src, quindi imposta una funzione di caricamento sull'immagine per farla sfumare al caricamento. Puoi anche impostare un filatore da mostrare durante il caricamento. Sembra davvero professionale.

— Jordan Carter,

@JordanCarter Certo, se le prestazioni dettagliate sono una preoccupazione. Come sidenote, direi che visibility: hiddenè un po 'più adatto rispetto opacity: 0ai selettori di attributi che stai suggerendo.

— mystrdat,

6

Basandomi sulla risposta di Ben Blank, l'unico modo per convalidarlo nel validatore w3 era così:

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

— John Duncan
fonte

Convalida, ma risulta in un'immagine non funzionante in Firefox, anche con un altattributo vuoto .

— James Wright,

4

Personalmente utilizzo about:blank srce gestisco l'icona dell'immagine rotta impostando l'opacità imgdell'elemento su 0.

— Miguel
fonte

7

Questo è sporco!

— mystrdat,

@mystrdat: cura di elaborare perché è sporco? La risposta accettata, usando "//: 0" mi ha dato ancora l'icona dell'immagine rotta più una strana richiesta infinita su Firefox. L'alternativa p64 a pixel singolo, anche con molti voti, mi ha dato problemi quando ho usato <img> come segnaposto, sia con che senza specificare l'altezza e la larghezza. Questo è il modo più pulito che ho trovato per raggiungere il mio obiettivo senza richieste inutili e passando tutte le linter e le convalide.

— Miguel,

Tutte le soluzioni di cui sopra sono molto stupide, quella accettata inclusa, farò una nuova risposta una volta che avrò del tempo in più.

— mystrdat,

@mystrdat: Sarei ancora felice di sapere cosa hai da dire al riguardo?

— funkylaundry,

1

@funkylaundry Mi scuso per aver fatto grandi richieste e scomparendo, ho pubblicato la mia risposta ora. Ammetto anche di non aver notato prima le altre soluzioni URI di dati, con cui sono d'accordo, ma credo comunque che la mia sia superiore nella sintassi.

— mystrdat,

4

<img src="invis.gif" />

Dove invis.gif è una gif trasparente a singolo pixel. Ciò non si interromperà nelle versioni future del browser e ha funzionato nei browser legacy dagli anni '90.

png dovrebbe funzionare anche ma nei miei test, la gif era di 43 byte e la png era di 167 byte, quindi la gif ha vinto.

ps non dimenticare un tag alt, piacciono anche ai validatori.

— Franki
fonte

-1

Semplicemente, in questo modo:

<img id="give_me_src"/>

— anmml
fonte

4

Non è una buona idea secondo le specifiche : l'attributo src deve essere presente e deve contenere un URL valido ...

— Michael Litvin,

1

Forse funziona bene con Chrome, ma genererà errori nella convalida HTML e non è un HTML valido W3 ...

— EhsanT