使用FastAPI和Jinja2嵌入plot.png到HTML时出现404错误如何解决

404报错是因为FastAPI默认没有配置静态文件托管服务，无法直接返回本地存储的图片、CSS、JS这类静态资源，按照以下步骤修改即可解决：

解决步骤 #

1. 调整项目目录结构 #

在你的项目根目录创建名为static的文件夹，把存放在根目录的plot.png移动到这个static文件夹里，最终结构参考：

你的项目根目录/
├── main.py
├── templates/
│   └── plot_template.html
└── static/
    └── plot.png

2. 修改main.py添加静态文件托管配置 #

导入StaticFiles模块，并且挂载静态目录，修改后的完整代码如下：

from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles # 新增导入

app = FastAPI()
templates = Jinja2Templates(directory="templates/")
# 新增静态目录挂载配置
app.mount("/static", StaticFiles(directory="static"), name="static")


@app.get("/analytics")
async def get_plot(request: Request):
    result = "Please select a user: "
    return templates.TemplateResponse('plot_template.html', context={'request': request, 'result': result})


@app.post("/analytics")
async def get_plot(request: Request, username: str = Form(...)):
    user_email = username + "@mycompany.com"
    result = user_email
    return templates.TemplateResponse('plot_template.html', context={'request': request, 'result': result})

3. 修改HTML模板里的图片路径 #

把plot_template.html里的img标签的src属性修改为静态目录下的路径：

<img src="/static/plot.png" alt="Plot will display after a user is selected">

修改完成后重启服务，再次访问页面即可正常加载图片。

内容的提问来源于stack exchange，提问作者GSwart