Flask项目中HTML无法加载本地图片文件的问题排查及解决方案

问题描述 #

我之前碰到一个特别困惑的问题：把Flask项目简化到最基础功能后，HTML页面还是没法加载本地图片，只显示错误图标，控制台报404错误，但错误提示里的路径和图片实际路径完全一致，折腾了好久都没头绪。

我的初始项目结构是这样的：

test_uploads
├── app
│ ├─ templates
│ │ └─ image.html
│ ├─ __init__.py
│ └─ routes.py
├── cover_images
│ └─ image.jpg
├── config.py
└─ main.py

对应的代码如下：

image.html

<!DOCTYPE html>
<html>
<head>
<title>View Stock</title>
</head>
<body>
<img src="{{ image }}">
</body>

app/init.py

from config import Config
from flask import Flask
app = Flask(__name__)
app.config.from_object(Config)
from app import routes, models

config.py

import os
basedir = os.path.abspath(os.path.dirname(__file__))
class Config():
    UPLOAD_FOLDER = os.path.join(basedir, 'cover_images')

main.py

from app import app

routes.py

from app import app
from flask import render_template
import os
@app.route('/check')
def image_check():
    image_path = os.path.join(app.config['UPLOAD_FOLDER'], 'image.jpg')
    print(image_path)
    return render_template('image.html', image = image_path)

终端的请求日志显示：

127.0.0.1 - - [19/Nov/2021 10:51:57] "GET /check HTTP/1.1" 200 -
127.0.0.1 - - [19/Nov/2021 10:51:57] "GET /Users/<me>/Downloads/test_uploads/cover_images/image.jpg HTTP/1.1" 404 -

解决方案 #

后来我终于搞懂了问题根源：Flask默认会从应用启动目录下的static文件夹读取静态资源，我的项目启动目录是test_uploads/app，之前把图片放在项目根目录的cover_images里，Flask根本找不到这个位置的资源。

我调整了项目结构，在app目录下创建了static文件夹并把图片移进去：

test_uploads
├── app
│ ├─ templates
│ │ └─ image.html
│ ├─ static
│ │ └─ image.jpg
│ ├─ __init__.py
│ └─ routes.py
├── config.py
└─ main.py

同时修改了HTML里的图片引用路径：

<!DOCTYPE html>
<html>
<head>
<title>View Stock</title>
</head>
<body>
<img src="static/{{ image }}">
</body>

修改完成后图片就能正常渲染了。另外补充一个小技巧：如果不想用默认的static文件夹和访问路径，还可以通过app.config.static_folder和app.config.static_url_path这两个属性，自定义静态资源的存储位置和访问路径。

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