Python Flask加载HTML背景图片报404 Not Found错误如何解决

使用Python Flask结合HTML开发Web页面时，为页面设置背景图片后，浏览器控制台抛出错误：Failed to load resource: the server responded with a status of 404 (NOT FOUND)。开发者确认项目目录结构配置无误，相关实现代码如下：

涉及代码 #

home.py 文件代码 #

from flask import render_template, Blueprint, request, send_file
home_page = Blueprint('home', __name__)

@home_page.route('/', methods=['POST', 'GET'])
def home():
    return render_template('index.html')
    return send_file ("home_bg.jpg")

index.html 文件代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>poo</title>
    <style>
    </style>
</head>
<body style="background-image: url(/static/home_bg.jpg);">
    <script>
    </script>
</body>
</html>

开发者初步猜测问题与home.py中向客户端返回图片资源的逻辑有关，需要明确问题排查方向与正确实现方案。

1. 路由函数中return render_template('index.html')执行后函数会直接终止，后面的send_file("home_bg.jpg")是永远不会执行的死代码，本身没有任何作用。
2. Flask本身内置静态资源处理逻辑，不需要手动写路由返回图片、CSS、JS这类静态文件，你写的send_file逻辑完全多余。
3. 触发404的核心原因基本是静态资源存放位置不符合Flask默认约定，或者蓝图未正确配置静态资源路径。

• 首先校准项目目录结构，Flask默认要求静态资源存放在项目根目录的static文件夹下，模板文件存放在templates文件夹下，标准结构参考：

项目根目录/
├── home.py
├── static/
│   └── home_bg.jpg  # 背景图放在这个目录下
└── templates/
    └── index.html

• 清理home.py中的无效代码，路由函数只需要返回模板即可，修正后的代码：

from flask import render_template, Blueprint
home_page = Blueprint('home', __name__)

@home_page.route('/', methods=['POST', 'GET'])
def home():
    return render_template('index.html')

不需要导入send_file，也不需要编写任何专门返回图片的路由，Flask会自动响应/static路径下的资源请求。

• 如果你自定义了静态资源存放位置，初始化Blueprint时必须显式指定static_folder参数，否则Flask无法定位静态资源：

home_page = Blueprint('home', __name__, static_folder='你的静态文件目录路径')

• 以上配置完成后如果还是报404，按Ctrl+F5硬刷新浏览器清除缓存重试，避免旧缓存导致的资源请求异常。

注意：你当前HTML中写的背景图路径/static/home_bg.jpg写法本身没有问题，只要图片存放在对应static目录下即可正常加载，不要额外添加多余的后端返回逻辑。

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