Flask前端应用无法加载图片与静态文件问题求助

嘿，这是Flask新手常遇到的静态资源加载问题——你现在直接读取HTML文件内容返回给客户端，但Flask并没有自动为你的图片、JS文件创建访问路由，所以浏览器请求这些资源时，服务器找不到它们，就返回404了。咱们用Flask的标准机制来搞定它：

方案一：按Flask规范调整项目结构（推荐长期使用） #

Flask有默认的模板和静态资源目录约定，遵循这个结构能省掉很多麻烦，先把你的文件整理成这样：

你的项目文件夹/
├── app.py
├── templates/          # 专门放HTML模板的文件夹
│   └── index.html
└── static/             # 所有静态资源（图片、JS、CSS）都放这
    ├── shards-logo-white.svg
    └── js/
        ├── shards.min.js
        └── demo.min.js

修改服务端代码 #

用Flask提供的render_template函数来加载模板，它会自动帮你处理静态资源的路径问题：

from flask import Flask, render_template  # 别忘了导入render_template
app = Flask(__name__)

@app.route('/')
def hello():
    return render_template('index.html')  # 替换原来的open读取方式

if __name__ == '__main__':
    app.run(host='localhost', port=8000, debug=True)

修正HTML里的资源引用 #

在HTML中用url_for函数生成静态资源的正确URL，这样不管你后续怎么部署，路径都不会错：

<!-- 图片引用 -->
<img src="{{ url_for('static', filename='shards-logo-white.svg') }}" alt="Example Navbar 1" class="mr-2" height="30">

<!-- JS文件引用 -->
<script src="{{ url_for('static', filename='js/shards.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/demo.min.js') }}"></script>

方案二：临时快速修复（不推荐长期使用） #

如果你暂时不想调整文件结构，可以手动给静态资源添加路由。针对你当前的文件布局（index.html在html目录，图片同目录，JS在html/js），修改代码如下：

from flask import Flask, send_from_directory
app = Flask(__name__)

@app.route('/')
def hello():
    return open('html/index.html').read()

# 处理图片请求
@app.route('/shards-logo-white.svg')
def serve_logo():
    return send_from_directory('html', 'shards-logo-white.svg')

# 处理JS文件请求
@app.route('/js/<filename>')
def serve_js(filename):
    return send_from_directory('html/js', filename)

if __name__ == '__main__':
    app.run(host='localhost', port=8000, debug=True)

同时要把HTML里的JS路径改成<script src="/js/shards.min.js"></script>（去掉前面的html/），因为现在我们的路由是/js/开头的。

还是建议用方案一，这是Flask设计的标准用法，能避免后续出现更多路径相关的坑。

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