javascript data:image/png;base64 是 img 标签的唯一 base64 编码吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32791067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is data:image/png;base64 the only base64 encoding for the img tag?
提问by Rick
Been working in Java with images from the web encoded as base64 strings. I have only seen image/png format in img src tags i.e. data:image/png;base64,{eNc0d3d_St!ng...}I have not seen image/gif or image/jpg. I have looked on SO and read a little on base 64 encoding.
使用 Java 处理来自网络的图像编码为 base64 字符串。我只在 img src 标签中看到了 image/png 格式，即data:image/png;base64,{eNc0d3d_St!ng...}我没有看到 image/gif 或 image/jpg。我查看了 SO 并阅读了一些关于 base 64 编码的内容。
Furthermore, I strip off the data:image/png;base64part in Java (Android) when doing
Base64.decode(src, Base64.DEFAULT)so it looks like there is no need for the png in that situation. In fact if I do not strip off this "header" then BitmapFactory.decodeByteArrayreturns null.
此外，我data:image/png;base64在这样做时剥离了Java (Android) 中的部分，
Base64.decode(src, Base64.DEFAULT)看起来在这种情况下不需要 png。事实上，如果我不去掉这个“标题”，则 BitmapFactory.decodeByteArray返回 null。
So the question is, are there other formats other than png for image encoding on the web?
那么问题来了，除了 png 之外，还有其他格式可以用于网络上的图像编码吗？
采纳答案by Rolando Corratge Nieves
Yes they are:
对，他们是：
data:image/gif
数据：图像/gif
data:image/jpg
数据：图像/jpg
etc...
等等...
and not only for images:
不仅适用于图像：
data:text/html
数据：文本/html
The format is the follow
格式如下
data:[<media type>][;charset=<character set>][;base64],<data>
Se here https://en.wikipedia.org/wiki/Data_URI_scheme
在这里 https://en.wikipedia.org/wiki/Data_URI_scheme
and
和
回答by Buzinas
No, you can use gif, jpgor any type of image that the browser reads. E.g:
不，您可以使用gif，jpg或浏览器读取的任何类型的图像。例如：
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />回答by Nick
async/await version
异步/等待版本
const axios = require("axios");
const response = await axios.get("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Los_Colorines_4.jpg/320px-Los_Colorines_4.jpg", {
responseType: "arraybuffer"
});
const base64 = Buffer.from(response.data, 'base64').toString('base64');
const base64ImageUrl = `data:image/gif;base64,${base64}`
