FastAPI页面CSS、图片加载失败报404错误问题咨询

• 静态资源挂载代码被注释：代码中负责托管CSS、图片等静态文件的app.mount()行处于注释状态，FastAPI默认不会自动响应静态资源请求，所有静态路径请求都会返回404。
• 目录存放错误：templates目录仅用于存放Jinja2模板文件，把CSS、图片这类静态资源放在该目录下时，模板引擎不会对外提供这些文件的访问能力。
• 资源引用路径不匹配：HTML中写的静态资源路径没有和服务端挂载规则对齐，直接请求/css/路径下的文件，服务端没有对应路由处理。

1. 调整项目目录结构
   将CSS、图片文件夹从templates目录移出，在项目根目录（和Server.py同级）新建static文件夹存放所有静态资源，调整后的目录结构：

Server.py
templates/
└── index.html
static/
├── css/
│   └── tooplate-vertex.css
└── img/
    ├── img1
    └── img2

2. 修正服务端代码
   取消静态资源挂载行的注释，补全缺失的语法括号，修正后核心代码：

from fastapi import FastAPI, status, Response
import asyncio
from fastapi.responses import HTMLResponse, StreamingResponse
from fastapi.requests import Request
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles

app = FastAPI()

# 挂载静态资源目录，补全原代码缺失的右括号
app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates")

@app.get("/index", response_class=HTMLResponse)
async def home(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

3. 修改HTML中的资源引用路径
   所有CSS、图片的引用路径前统一添加/static前缀，示例：

<!-- 原错误写法 -->
<link rel="stylesheet" href="/css/tooplate-vertex.css">
<img src="/img/img1">

<!-- 修正后写法 -->
<link rel="stylesheet" href="/static/css/tooplate-vertex.css">
<img src="/static/img/img1">

特殊说明：如果不想修改HTML内的路径前缀，可以将静态资源挂载路径设为根路径app.mount("/", StaticFiles(directory="static"), name="static")，但该方式容易和自定义业务路由冲突，不推荐使用。

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