如何以HTML显示Base64图像？

我在内联显示Base64图像时遇到问题。

有人可以指出我正确的方向吗？

---

#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数据是否正确。