使用 Python 在 HTML 页面中显示图像时遇到问题

Question

我正在尝试使用 Python 和 Flask 在 HTML table 中显示图像，但它仍然显示“无法加载图像”图标，当我尝试在另一个选项卡中打开它时，我得到以下信息：

“数据”链接被屏蔽
网页数据：image/png;base64,b'\xfahg\xffZX\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff [Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff[Y\xff\\V\xe5YeoQ\x9a^P\xa3`P\...
可能暂时关闭，也可能永久移动到新网址。

我的 HTML 模板中有以下内容：

<tr>
  <td>{{ puzzle["Name"] }}</td>
  <td>{{ puzzle["Type"] }}</td>
  <td>{{ puzzle["AssetsSize"] }}</td>
  <td>
    <img src="data:image/png;base64,{{ convert_image(puzzle) }}">
  </td>
</tr>

和 convert_image() 函数 returns 以下内容：

def convert_image(data):
if 'Thumbnail' in data:
return data['Thumbnail'].encode("latin1")
return "Thumbnail Unavailable"

关于我做错了什么的提示或想法？

我已经尝试过在从函数返回之前使用 base64 编码，但也没有用。

Answer 1

应该base64编码。
您的 data 不是 PNG 文件。

PNG 文件以 8-byte signature 开头，应该如下所示：

>>> f = open("test.png", "rb")
>>> header = f.read(8)
>>> header
b'\x89PNG\r\n\x1a\n'
>>> header.hex(" ", 1)
'89 50 4e 47 0d 0a 1a 0a'

参考文献：

Data URLs

使用 Python 在 HTML 页面中显示图像时遇到问题

Trouble to display an image in HTML page using Python

html

python

byte

image

jinja2