Recently, I came to a web page with pictures inside, but there were no external image resources referenced. I was very curious. After checking the code, I found that the pictures inside were replaced by a base64 encoded string. This is called Data URI scheme.
The types supported by Data URI scheme are:
data:, text data
data:text/plain, text data
data:text/html, HTML code
data:text/html;base64, base64 encoded HTML code
data:text/css,CSS code
data:text/css;base64, base64 encoded CSS code
data:text/javascript,javascript code
data:text/javascript;base64, base64 encoded Javascript code
data:image/gif; base64, base64 encoded gif image data
data:image/png; base64, base64 encoded png image data
data:image/jpeg; base64, base64 encoded jpeg image data
data:image/x-icon; base64, base64 encoded icon image data
I made a simple page myself, click to view the test page, you can take a look at the source code. The overall operation is as follows:
1 base64 coded picture
Under Linux, you can directly use base64+ image path to generate base64 encoded strings
picture:
Use the command:
base64 android.png
The resulting string is:
Copy the code