Flask开发Web应用时遭遇404资源加载失败问题求助

问题1：静态资源路径使用相对路径导致404 #

你的Home.html中所有静态资源（CSS、JS、图片）都使用了../static/...这类相对路径，但Flask的静态文件服务默认通过绝对路径/static/提供访问，相对路径会让浏览器解析出错误的资源请求地址，最终返回404。

解决办法 #

将所有静态资源的路径改为绝对路径，去掉前缀../：

• CSS引用修改为：<link rel="stylesheet" href="/static/index.css">
• JS引用修改为：<script src="/static/index.js"></script>
• 图片引用示例修改为：<img src="/static/images/5.jpg" id="about.image">

问题2：首页路由装饰器缺失导致页面访问异常 #

你的app.py中index函数的路由装饰器缺少@符号，导致该路由未被Flask注册，访问根路径/时会出现异常，间接影响静态资源的加载逻辑。

解决办法 #

修改app.py中的首页路由代码，添加@符号：

@app.route('/')
def index():
    return render_template('Home.html')

额外检查项 #

• 确认static目录下的文件存在：检查index.css、index.js以及images目录下的图片文件是否真实存在，文件名和路径要与代码中的引用完全一致（注意大小写，Linux系统下.JPEG和.jpeg会被视为不同文件）。
• 表单提交路径验证：JS中使用的/SubmitForm是正确的绝对路径，且该路由在app.py中已正确注册，无需修改。

修改后关键代码示例 #

修改后的app.py

from flask import Flask, request, jsonify, render_template
import sqlite3

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('Home.html')

@app.route('/SubmitForm',methods=['POST'])
def SubmitForm():
    data = request.get_json()
    name, email, message = data['name'], data['email'], data['message']
    connection = sqlite3.connect("messages.db")
    cursor = connection.cursor()
    cursor.execute("""CREATE TABLE IF NOT EXISTS messages(name TEXT,email TEXT,message TEXT)""")
    cursor.execute("INSERT INTO messages VALUES(?,?,?)",[name,email,message])
    connection.commit()
    connection.close()
    response = jsonify({'status': 'success', 'message': 'message added to the database successfully'})
    return response

if __name__ == '__main__':
    app.run()

修改后的Home.html（路径修改部分）

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Libertas startup</title>
    <link rel="stylesheet" href="/static/index.css">
</head>
<!-- ...中间内容省略... -->
<img src="/static/images/5.jpg" id="about.image">
<!-- ...其他图片引用均改为绝对路径... -->
<script src="/static/index.js"></script>

完成上述修改后，重启Flask应用，静态资源即可正常加载，404错误会消失。

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