Come visualizzare immagini Base64 in HTML?

Ho problemi a visualizzare un'immagine Base64 in linea.

Qualcuno può indicarmi la direzione giusta?

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'                 
       src='data:image/jpeg;base64, LzlqLzRBQ...<!-- base64 data -->' />
  </body>
</html>
dda
Domanda modificata 7º gennaio 2017 в 7:28
Programmazione
image html base64 inline
14º dicembre 2011 в 4:53
26 visualizzazioni
Soluzione

Il mio sospetto è ovviamente i dati base64 reali, altrimenti mi sembra buono. Vedi [questo fiddle][1] dove funziona uno schema simile. Puoi provare a specificare il set di char.

<div>
  <p>Taken from wikpedia</p>
  ![Red dot](data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==)
</div>

Puoi provare questo decoder base64 per vedere se i tuoi dati base64 sono corretti o no.

Ruslan López
Risposta modificata 3º luglio 2019 в 9:57
Commentari (7)

È necessario specificare correttamente Content-type, Content-encoding e charset come

 data:image/jpeg;charset=utf-8;base64,

secondo la sintassi dello schema URI dati:

 data:[][;charset=][;base64],
bcag2
Risposta modificata 11º settembre 2019 в 12:12
Commentari (4)

Il carattere + che si trova in un URI di dati dovrebbe essere codificato come %2B. Questo è come la codifica di qualsiasi altra stringa in un URI. Per esempio, i separatori di argomenti (? e &) devono essere codificati quando un URI con un argomento è inviato come parte di un altro URI.

Commentari (0)