如何在HTML中显示Base64图片?
我在内联显示Base64图片时遇到了麻烦。
谁能给我指出正确的方向?
<!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>
498
11
我的怀疑当然是实际的base64数据,否则对我来说是好的。请看[这个fiddle][1],类似的方案正在工作。你可以尝试指定char set。
你可以试试这个base64解码器,看看你的base64数据是否正确。
你需要指定正确的Content-type、Content-encoding和charset 如
根据数据URI方案的语法。
如果你的后台有PHP,你可以使用这段代码。
首先将您的图像转换为Base64(编码为Base64)。 你可以在网上或用PHP脚本来完成。
转换后你会得到如下结果
现在它'的简单使用。
你只需要把它放在图片的
src
中,并在那里定义它是base64编码的形式。例如:
。
这将显示基数64数据的图像。
你可以直接把你的数据放在一个url状态中,如
并且可以使用php函数来获取图片数据。
所以你可以复制粘贴imageData的值,并将其直接粘贴到你的url中,并将其分配给你的图片的src属性。
在数据URI中出现的+字符应该被编码为%2B。这与URI中任何其他字符串的编码一样。例如,当一个带有参数的URI作为另一个URI的一部分被发送时,参数分隔符(? 和&)必须被编码。
似乎你的数据URL有一些错误,你可以用这个在线的base64编码/[base64解码工具][2]对你的图片进行编码嵌入。
你可以使用这个在线的base64编码 / [base64解码工具][2]来对你的图片进行编码嵌入。 http://base64online.org/encode/
勾选"格式化为数据URL" 选项,将base64数据格式化为URL。
1:
[2]: http://base64online.org/decode/
也试试这个。
不建议用于生产,因为它只与现代浏览器兼容。
将Base64-image存储为一个变量,并使用纯HTML和JavaScript显示。
抚琴实例][1],直接尝试。
[1]: https://jsfiddle.net/punnerud/hctkxy1d/2/
PYTHON示例: