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

Kaiss B. 0
Viewed 50

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.

jinja2 base64 fastapi html python
1 Answers

As shown in the last section of this answer, on server side, you should return only the base64-encoded string using TemplateResponse:

# ...
base64_encoded_image = base64.b64encode(image_bytes).decode("utf-8")
return templates.TemplateResponse("index.html", {"request": request,  "myImage": base64_encoded_image})

On client side, you could display the image as follows:

<img src="data:image/jpeg;base64,{{ myImage | safe }}">

Alternative approaches can be found here.

userKJXc10
Related