Flask加载HTML模板时图片返回404无法加载，CSS正常加载问题求助

问题原因 #

Flask默认所有静态资源的访问路径都需要带/static/前缀，你的CSS文件路径写了/static/homepagestyle.css所以可以正常加载，但图片路径没有加static前缀，导致请求的路径和实际文件存放路径不匹配，返回404。

解决步骤 #

1. 确认项目文件夹结构 #

首先保证你的文件存放路径和下面的结构一致：

项目根目录
├── 你的Python启动文件（如app.py）
├── static
│   ├── homepagestyle.css
│   └── images
│       ├── Léelo.png
│       └── background.png
└── templates
    └── home.html

所有图片都放在static/images目录下。

2. 修改HTML中的图片路径 #

有两种修改方式，推荐使用第二种更符合Flask规范：

方式1：硬编码添加static前缀

• logo图片的img标签修改为：

<img id="logo" src="/static/images/Léelo.png" alt="Léelo"><br>

• body的背景图样式修改为：

<body style="background-image: url('/static/images/background.png');">

注：你原有的<body div style="xxx">属于语法错误，需要把多余的div属性去掉

方式2：使用Flask内置的url_for函数（更推荐）

利用Jinja2模板的内置函数动态生成静态资源路径，后续调整静态资源配置时不需要批量修改路径：

• logo图片的img标签修改为：

<img id="logo" src="{{ url_for('static', filename='images/Léelo.png') }}" alt="Léelo"><br>

• body的背景图样式修改为：

<body style="background-image: url('{{ url_for('static', filename='images/background.png') }}');">

3. 额外检查项 #

如果修改路径后还是404，检查下面两项：

• 图片文件名的大小写、拼写、特殊符号（比如文件名里的重音符号）和代码里写的是否完全一致，Linux等大小写敏感的系统下文件名大小写不匹配也会返回404
• 图片文件权限是否正常，保证Flask进程有读取图片文件的权限

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