如何在HTML img标签中显示Python获取的JPEG字节数据？

要实现这个需求，核心是把JPEG字节数据转换成Base64编码字符串，再通过data URI scheme嵌入到img标签的src属性中，具体步骤如下：

1. Python端处理字节数据 #

用Python内置的base64模块把JPEG字节编码成可被HTML识别的Base64字符串：

import base64

# 你的JPEG字节数据
jpeg_bytes = b'\xff\xd8\xff\xe0\x00\x10JFIF\x00\x01\x01\...'

# 编码为Base64字符串（需decode成utf-8格式的普通字符串）
base64_jpeg = base64.b64encode(jpeg_bytes).decode('utf-8')

# 拼接成img标签可用的src格式
img_src = f'data:image/jpeg;base64,{base64_jpeg}'

2. 在HTML中使用 #

后端直接渲染HTML #

如果是Python后端直接生成HTML内容，把上面的img_src直接嵌入到img标签的src属性里：

<img src="{img_src}" alt="JPEG图片">

比如用Flask的Jinja2模板，直接写{{ img_src }}即可完成渲染。

前后端分离场景 #

如果前端通过接口获取数据，把Python生成的base64_jpeg字符串传给前端，再用JS设置img的src：

// 假设从接口拿到的Base64字符串是base64Jpeg
const imgElement = document.getElementById('target-img');
imgElement.src = `data:image/jpeg;base64,${base64Jpeg}`;

注意事项 #

• 若JPEG文件体积较大（比如超过1MB），不推荐用这种方式，会增加HTML体积拖慢加载速度，此时建议将字节数据存为临时文件，通过URL地址访问。
• 确保编码后的字符串无额外换行或空格，否则会导致图片加载失败。

内容的提问来源于stack exchange，提问作者seriously