如何在FastAPI的HTML/Jinja2模板中显示bytes类型图片？

问题原因 #

你遇到的核心问题是Jinja2的自动转义机制：默认情况下，Jinja2会将传入字符串中的HTML特殊字符（如<、"）转义成实体字符（<、"），导致你拼接的<img>标签被当成纯文本显示，而非渲染成图片。

解决方案 #

方法1：模板中使用safe过滤器（推荐） #

后端仅传递base64编码后的字符串，在模板中手动构建<img>标签并标记为安全内容：

后端代码修改：

import base64
from fastapi import Request
from fastapi.templating import Jinja2Templates

templates = Jinja2Templates(directory="templates")

@app.get("/{id}")
async def root(request: Request, id: str):
    picture = await get_online_person()
    # 将bytes图片转成base64字符串
    img_base64 = base64.b64encode(picture).decode()
    return templates.TemplateResponse(
        "index.html", {"request": request, "img_base64": img_base64}
    )

模板（index.html）修改：

<!-- 根据实际图片格式修改image/png，比如JPG用image/jpeg -->
<img src="data:image/png;base64,{{ img_base64 | safe }}">

方法2：后端用Markup标记安全HTML #

通过markupsafe.Markup类将拼接好的<img>标签标记为安全内容，Jinja2会直接渲染而非转义：

后端代码修改：

import base64
from fastapi import Request
from fastapi.templating import Jinja2Templates
from markupsafe import Markup

templates = Jinja2Templates(directory="templates")

@app.get("/{id}")
async def root(request: Request, id: str):
    picture = await get_online_person()
    img_base64 = base64.b64encode(picture).decode()
    # 用Markup标记HTML为安全
    img_tag = Markup('<img src="data:image/png;base64,{}">').format(img_base64)
    return templates.TemplateResponse(
        "index.html", {"request": request, "img": img_tag}
    )

模板（index.html）修改：

{{ img }}

注意事项 #

确保data:image/png中的格式与实际图片一致：如果是JPG图片，改成data:image/jpeg；GIF则用data:image/gif，否则可能无法正常显示图片。

内容的提问来源于stack exchange，提问作者Kaiss B.