[Python] How to display a bytes type image in HTML/Jinja2 template using FastAPI?

I have a FastAPI app that gets an image from an API. This image is stored in a variable with type: bytes.

I want to display the image in HTML/Jinja2 template (without having to download it). I followed many tutorials but couldn't find the solution.

Here is what I came up with so far:

@app.get("/{id}")
async def root(request: Request, id: str):
picture = await get_online_person()

data = base64.b64encode(picture) # convert to base64 as bytes
data = data.decode() # convert bytes to string

# str_equivalent_image = base64.b64encode(img_buffer.getvalue()).decode()
img_tag = '<img src="data:image/png;base64,{}">'.format(data)
return templates.TemplateResponse(
"index.html", {"request": request, "img": img_tag}
)


All I get in the HTML is this: (as text on the page, not from source code)

<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAQECAQEBAgICAgICAgICAQICAgICAgICAgL/2wBDAQEBAQEBAQEBAQECAQEBAgICAgI
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgL/wgARCAQABAADASIAA
hEBAxEB/8QAHgAAAQUBAQEBAQAAAAAAAAAABQIDBAYHAQgACQr/xAAcAQACAwEBAQEAAAAAAAAAAAACAwABBAUGBwj/2gAMAwEAAhADEAAAAfEpwSR+a+9IPR3c7347iwscmWyYchEIJjn+MbJj/c4FFbbb9J5....................


Note: For people who are marking my question to a duplicate talking about urllib, I cannot use urllib because the image I'm getting is from ana API, and using their direct url will result in a 403 Forbidden, so I should use their python API to get the image.

Continue reading...