Flask项目图片加载失败（404错误）解决求助

问题说明 #

项目目录下存在templates文件夹和images文件夹，templates/base.html尝试加载images文件夹内的address.png时，控制台提示GET http://127.0.0.1:5000/images/address.png 404 (NOT FOUND)，图片无法正常显示。已尝试修改图片路径为/images/address.png、./images/address.png等，均无效果，预期图片能正常显示。

项目代码 #

main.py代码 #

from flask import Flask, render_template, request, redirect, session, url_for
from werkzeug.security import generate_password_hash, check_password_hash
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

# Routes
@app.route('/')
def index():
    return redirect(url_for('home'))

@app.route('/home')
def home():
    return render_template('base.html')

@app.route('/rd')
def rd():
    return 

@app.route('/about', methods=['GET'])
def about():
    return render_template('about.html')

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

解决方法 #

Flask框架默认只会将static文件夹识别为静态资源目录（如图片、CSS、JS文件等），根目录下的images文件夹不会被自动映射，按以下步骤调整即可：

1. 调整目录结构
   将原images文件夹移入新建的static文件夹中，最终项目结构如下：

   • 项目根目录
     • main.py
     • templates/
       • base.html
       • about.html
     • static/
       • images/
         • address.png

2. 修改base.html中的图片引用路径
   有两种方式可以正确引用图片：

   • 方式一：使用Flask内置的url_for函数生成静态资源路径（推荐，适配不同部署场景）

     <img src="{{ url_for('static', filename='images/address.png') }}" alt="address">
     

   • 方式二：直接使用绝对路径

     <img src="/static/images/address.png" alt="address">
     

3. 重启Flask服务
   保存所有修改后，重启本地Flask服务，访问页面即可看到图片正常加载。

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