2011-01-25 34 views
5

Avevo provato tutti i modi possibili per visualizzare l'immagine usando la stringa base64. Ma nessuno di loro sta funzionando. L'ho provato su IE6,7, Firefox 3. Per favore dimmi cosa c'è di sbagliato con il codice qui sotto.BASE64 in HTML non funziona

<head> 

<STYLE type="text/css"> 
div.image { 
    width:100px; 
    height:100px; 
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...); 
} 
</STYLE> 
</head> 
<body> 
<img src="data:image/jpg;base64,968" /> 
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." /> 
<script type="text/javascript" src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script> 
<div class="image"></div> 
</body> 
+0

Ho trovato [questa pagina] (http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html) dov'era (luglio, 2005) fatto per un'immagine GIF. L'esempio (ancora) funziona per me in Firefox 3.6. Solo questa interessante menzione nei commenti è che forse l'URL è di dimensioni limitate ... – pascal

+0

Tuttavia, il motivo di questa implementazione, cioè che il server è stato caricato dagli accessi alle icone, dovrebbe probabilmente essere mitigato dall'anticipo sulla gestione della cache (su server, rete, lato client) da quel momento ... – pascal

risposta

4

ho testato su IE6,7, Firefox 3

Accade solo che nessuno di questi URI dati di supporto (beh, Firefox 3 fa credo, solo che non molto bene). Quindi non stai facendo niente di sbagliato.

Se è necessario visualizzare l'immagine di sfondo in questi browser, utilizzare invece i file di immagine tradizionali e url().

+0

+1, ed ecco un modo JS per rilevare se il tuo browser lo supporta. http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/ –

+0

Ho provato su Firefox 3.6, esiste un altro modo per visualizzare l'immagine senza fornire altri riferimenti esterni? –

+0

@articlestack: Firefox 3.6 dovrebbe supportare correttamente gli URI dei dati. Ma onestamente, ne vale la pena? Probabilmente la tua immagine non sarà molto grande, quindi una richiesta HTTP aggiuntiva per quell'immagine non farà male. – BoltClock