我在内联显示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>
当前回答
试试这个吧:
let base64="iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
let buffer=Uint8Array.from(atob(base64), c => c.charCodeAt(0));
let blob=new Blob([buffer], { type: "image/gif" });
let url=URL.createObjectURL(blob);
let img=document.createElement("img");
img.src=url;
document.body.appendChild(img);
不推荐用于生产环境，因为它只与现代浏览器兼容。
其他回答
这将显示一个Base64数据的图像:
<style>
.logo {
width: 290px;
height: 63px;
background: url(data:image/png;base64,copy-paste-Base64-data-here) no-repeat;
}
</style>
<div class="logo"></div>
您需要指定正确的Content-type、Content-encoding和字符集。
Like
data:image/jpeg;charset=utf-8;base64,
根据数据URI方案的语法:
data:[<media type>][;charset=<character set>][;base64],<data>
我怀疑的当然是实际的Base64数据。在我看来还不错。看看这把小提琴，类似的方案也在起作用。您可以尝试指定字符集。
< div > <p>摘自维基百科</p> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4 / / 8 / w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="红点" /> < / div >
您可以尝试这个Base64解码器，看看您的Base64数据是否正确。
试试这个吧:
let base64="iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
let buffer=Uint8Array.from(atob(base64), c => c.charCodeAt(0));
let blob=new Blob([buffer], { type: "image/gif" });
let url=URL.createObjectURL(blob);
let img=document.createElement("img");
img.src=url;
document.body.appendChild(img);
不推荐用于生产环境，因为它只与现代浏览器兼容。
数据URI中出现的+字符应该被编码为%2B。这类似于对URI中的任何其他字符串进行编码。例如，参数分隔符(?和&)必须在带有参数的URI作为另一个URI的一部分发送时进行编码。
