Kuinka näyttää Base64-kuvat HTML:ssä?

Minulla on ongelmia Base64-kuvan näyttämisessä rivissä.

Voiko joku näyttää minulle oikean suunnan?

<!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>
Ratkaisu

Epäilyttäväni on tietysti todellinen base64-data, muuten se näyttää minusta hyvältä. Katso [tämä fiddle][1], jossa samanlainen järjestelmä toimii. Voit kokeilla char setin määrittämistä.

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

Voit kokeilla tätä base64-dekooderia nähdäksesi, onko base64-tietosi oikein vai ei.

Kommentit (7)

Sinun on määritettävä oikea Content-type, Content-encoding ja charset. kuten

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

data URI scheme syntaksin mukaisesti:

 data:[][;charset=][;base64],
Kommentit (4)

Data-URI:ssä esiintyvä +-merkki olisi koodattava muodossa %2B. Tämä on sama kuin minkä tahansa muun URI:ssä olevan merkkijonon koodaus. Esimerkiksi argumenttien erotinmerkit (? ja &) on koodattava, kun argumentin sisältävä URI lähetetään osana toista URI:tä.

Kommentit (0)