Πώς να εμφανίσετε εικόνες Base64 σε HTML;

Έχω πρόβλημα με την εμφάνιση μιας εικόνας Base64 inline.

Μπορεί κάποιος να μου δείξει τη σωστή κατεύθυνση;

<!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>
Λύση

Ο ύποπτός μου είναι φυσικά τα πραγματικά δεδομένα base64, αλλιώς μου φαίνεται καλό. Δείτε [αυτό το fiddle][1] όπου λειτουργεί παρόμοιο σύστημα. Μπορείτε να δοκιμάσετε να προσδιορίσετε το σύνολο char.

Σχόλια (7)

Πρέπει να καθορίσετε σωστά τα Content-type, Content-encoding και charset όπως

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

σύμφωνα με τη σύνταξη του data URI scheme:

 data:[][;charset=][;base64],
Σχόλια (4)

Ο χαρακτήρας + που εμφανίζεται σε ένα URI δεδομένων πρέπει να κωδικοποιείται ως %2B. Αυτό είναι όπως η κωδικοποίηση οποιουδήποτε άλλου αλφαριθμητικού σε ένα URI. Για παράδειγμα, τα διαχωριστικά των επιχειρημάτων (? και &) πρέπει να κωδικοποιούνται όταν ένα URI με ένα επιχείρημα αποστέλλεται ως μέρος ενός άλλου URI.

Σχόλια (0)