我在内联显示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>
当前回答
通过将元素的src属性设置为data:image/[图像格式];Base64，[Base64数据]，可以在HTML中显示Base64图像。
在这个例子中，data:image/jpeg;base64, src属性的一部分指定了图像的格式(jpeg)和LzlqLzRBQ…部分是映像的Base64数据。
元素的style属性可用于指定图像的显示和大小属性。在这种情况下，display:block将使图像成为块级元素，宽度:100px;高度:100px;将图像的宽度和高度设置为100像素。
<!DOCTYPE html>
<html>
<head>
<title>Display Base64 Image</title>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
</body>
</html>
标签的src属性设置为data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==。这指定图像是PNG格式，Base64数据包含在Base64之后，这是src属性的一部分。
其他回答
这是个老问题，但我发现了一些东西。
如果使用Pillow(PIL)加载图像并使用Base64 .b64encode(img.tobytes())，则Base64代码无效。
要让它工作，一旦你的字节加载到一个Image类，创建一个BytesIO对象，然后使用它来保存图像的BytesIO格式，即img。保存(bt_ob、格式=“png”)。
将seak设置为0，然后使用BytesIO对象的输出创建Base64编码的文本
base64.b64encode(bt_ob.read()).decode()
这段代码现在将在html中以"data:image/png;base64，<>"格式工作。
因此，html只会对来自object等文件的编码数据起作用，而Pillow Image对象不会产生这种数据，因此不起作用
试试这个吧:
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>
你的数据URL好像有错误。
你可以使用这个在线Base64编码/ Base64解码工具来编码你的图像嵌入: http://base64online.org/encode/
检查“格式为数据URL”选项格式化base64数据为URL。
如果你在后端有PHP，你可以使用下面的代码:
$image = 'http://images.itracki.com/2011/06/favicon.png';
// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));
// Format the image SRC: data:{mime};base64,{data};
$src = 'data: ' . mime_content_type($image) . ';base64,' . $imageData;
// Echo out a sample image
echo '<img src="' . $src . '">';
