Flask站点无法显示.png图片问题求助

1. 修正HTML标签错误 #

模板中使用了非标准的<image>标签，浏览器无法正确解析，需改为标准的<img>标签并补充规范写法：

<h1 style="color: brown;">
    <img src="{{ url_for('static', filename='images/akashiclibrarybook.png') }}" alt="Akashic Library Book">
    The Akashic Library
</h1>

2. 修复__init__.py的函数参数问题 #

create_app函数误用Python内置变量__name__作为参数，导致Flask无法正确识别应用根路径，进而找不到静态文件。修改如下：

from flask import Flask

def create_app():  # 移除错误的__name__参数
    app = Flask(__name__)
    app.config['SECRET_KEY'] = 'i love bananas'

    from .views import views
    from .auth import auth

    app.register_blueprint(views, url_prefix='/')
    app.register_blueprint(auth, url_prefix='/')

    return app

同步修改main.py的调用逻辑：

from website import create_app

app = create_app()  # 无需传参

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

3. 确认静态文件目录结构合规 #

确保项目目录符合Flask默认约定，文件位置正确：

你的项目/
├── main.py
└── website/
    ├── __init__.py
    ├── views.py
    ├── auth.py
    ├── templates/
    │   ├── base.html
    │   └── home.html
    └── static/
        └── images/
            └── akashiclibrarybook.png

• 检查akashiclibrarybook.png确实存在于static/images/目录
• 文件名和路径大小写需匹配（Linux/Mac系统区分大小写，建议统一小写避免问题）

4. 蓝图静态文件夹设置（可选） #

若蓝图需独立配置静态文件夹，需确保路径相对于蓝图文件位置。比如views.py在website/views/下，指向根目录static的写法为：

views = Blueprint('views', __name__, template_folder="templates", static_folder="../static")

若使用全局static目录，无需额外设置，Flask会自动识别。

5. 验证动态生成的图片路径 #

启动应用后，打开浏览器开发者工具（F12）查看图片元素的src属性，确认路径为/static/images/akashiclibrarybook.png。url_for('static', filename='images/akashiclibrarybook.png')是调用全局静态目录的正确写法。

关于VS Code点击链接报错的说明 #

VS Code无法解析模板中的{{ url_for() }}动态变量，这是编辑器的正常限制，不影响网站实际运行，仅需关注应用运行时的路径是否正确即可。

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