Como exibir imagens Base64 em HTML?

I'estou tendo problemas para exibir uma imagem Base64 em linha.

Alguém me pode apontar na direcção certa?

<!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
Pergunta editada :em
Programação
image html base64 inline
14º dezembro 2011 в 4:53
22 vistas
Solução

O meu suspeito é, claro, dados reais da base64, caso contrário, parece-me bem. Veja [este violino][1] onde um esquema similar está funcionando. Você pode tentar especificar o conjunto de caracteres.

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

Você pode tentar este decodificador base64 para ver se os dados da sua base64 estão corretos ou não.

Ruslan López
Resposta editada :em
Comentários (7)

Você precisa especificar o tipo de conteúdo, codificação de conteúdo e conjunto de caracteres corretos como

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

de acordo com a sintaxe do esquema URI de dados:

 data:[][;charset=][;base64],
bcag2
Resposta editada :em
Comentários (4)

O caractere + que ocorre num URI de dados deve ser codificado como %2B. Isto é como codificar qualquer outra string em um URI. Por exemplo, separadores de argumentos (? e &) devem ser codificados quando um URI com um argumento é enviado como parte de outro URI.

Comentários (0)