Trouble to display an image in HTML page using Python-CodePudding

I am trying to display an image in an HTML table using Python and Flask, but still, it shows that "the image couldn't be loaded" icon, and when I try to open it in another tab I get the following:

“data” links are blocked
The webpage at data: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\...
might be temporarily down or it may have moved permanently to a new web address.

I have the following in my HTML template:

<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>

And the convert_image() function returns the following:

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

Any tips or thoughts on what I am doing wrong?

I have already tried encoding with base64 before returning from the function, but did not work either.

CodePudding user response：

It should be base64 encoded.
Your data is not a PNG file.

A PNG file starts with an 8-byte signature that should look something like this:

>>> 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'

References:

Data URLs