如何以HTML显示Base64图像？
我在内联显示Base64图像时遇到问题。
有人可以指出我正确的方向吗？
Display Image
#1楼
数据URI中出现的+字符应编码为％2B。 这就像在URI中编码任何其他字符串一样。 例如，当带有参数的URI作为另一个URI的一部分发送时，必须对参数分隔符（？和＆）进行编码。
#2楼
您可以将数据直接放入url语句中，例如
src = 'url(imageData)' ;
并获取图像数据，您可以使用php函数
$imageContent = file_get_contents("imageDir/".$imgName);
$imageData = base64_encode($imageContent);
因此您可以复制粘贴imageData的值并将其直接粘贴到您的url中，并将其分配给图像的src属性
#3楼
您的数据网址似乎有误。
您可以使用此在线base64编码 / base64解码工具对图像进行编码以进行嵌入： http : //base64online.org/encode/
选中“格式化为数据URL”选项以将base64数据格式化为URL。
#4楼
如果后端有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 '
';
#5楼
这将显示基于64位数据的图像：
#6楼
首先将图像转换为Base64（编码为Base64）。 您可以在线或使用PHP脚本进行操作。
转换后，您将得到如下结果
iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEVBMTczNDg3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEVBMTczNDk3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRUExNzM0NjdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUExNzM0NzdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=
现在使用起来很简单。
您只需将其放在图像的src中，然后以base64编码形式对其进行定义。
例：
#7楼
也试试这个：
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);
不建议用于生产环境，因为它仅与现代浏览器兼容。
#8楼
将Base64图像存储为变量，并使用纯HTML和JavaScript显示它：
![]()
小提琴示例 ，可以直接尝试。
#9楼
PYTHON示例：
_, frame = cap.read()
# encode the frame in JPEG format
(flag, encodedImage) = cv2.imencode(".jpg", frame)
intel = str(base64.b64encode(encodedImage).decode('utf-8'))
hhh = f'''
sss{n}
'''
hhh = hhh
hhh = bytes(hhh, 'utf-8')
yield (b'--frame\r\n'
b'Content-Type: text/html; charset="UTF-8"\r\n\r\n' + hhh + b'\r\n\r\n'
)
#10楼
自3.1版起不再使用
import base64
with open('man.png', 'rb') as f:
encoded = base64.encodebytes(f.read())
b64 = encoded.decode('latin1')
print(b64)
#11楼
您需要指定正确的Content-type，Content-encoding和charset之类的
data:image/jpeg;charset=utf-8;base64,
根据数据URI方案的语法：
data:[][;charset=][;base64],
#12楼
我的怀疑当然是实际的base64数据，否则对我来说不错。 在类似的方案正在起作用的地方，请参见此提琴 。 您可以尝试指定字符集。
Taken from wikpedia
您可以尝试使用base64解码器查看base64数据是否正确。