Hoe Base64-afbeeldingen in HTML weergeven?

Ik heb problemen om een Base64 afbeelding inline weer te geven.

Kan iemand me in de juiste richting wijzen?

<!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
Bewerkte vraag 7de5 januari 2017 в 7:28
Programmering
image html base64 inline
14de2 december 2011 в 4:53
18 views
Oplossing

Mijn verdachte is natuurlijk de werkelijke base64 data, verder ziet het er voor mij goed uit. Zie [deze fiddle][1] waar een soortgelijk schema werkt. U kunt proberen char set op te geven.

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

U kunt deze base64 decoder proberen om te zien of uw base64 data correct is of niet.

Ruslan López
Bewerkt antwoord 3de2 juli 2019 в 9:57
Commentaren (7)

Je moet het juiste Content-type, Content-encoding en charset specificeren zoals

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

volgens de syntax van het data URI schema:

 data:[][;charset=][;base64],
bcag2
Bewerkt antwoord 11de2 september 2019 в 12:12
Commentaren (4)

Het + teken dat voorkomt in een data URI moet worden gecodeerd als %2B. Dit is net als het coderen van elke andere string in een URI. Bijvoorbeeld, argumentscheidingstekens (? en &) moeten worden gecodeerd wanneer een URI met een argument wordt verzonden als onderdeel van een andere URI.

Commentaren (0)