Render平台Flask应用上传图片无法在模板中显示求助

我在Render平台部署了Flask应用，使用Render持久化磁盘/var/static/uploads存储上传的图片，图片已成功上传，但HTML模板里无法显示这些图片。

保存图片的代码 #

def save_image(image_data):
   
    filename = generate_unique_filename(image_data.filename)
    
    static_uploads_folder = os.path.join('/var/static/uploads')
   
    image_data.save(os.path.join(static_uploads_folder, filename))
   
    return filename


def generate_unique_filename(original_filename):
    filename, extension = os.path.splitext(original_filename)
    timestamp = datetime.utcnow().strftime('%Y%m%d%H%M%S')
    unique_filename = f"{secure_filename(filename)}_{timestamp}{extension}"
    return unique_filename

HTML模板代码片段 #

<div class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
    {% for product in products %}
    <div class="col">
        <div class="card product-card border-0">
            <div class="magnifier position-relative overflow-hidden">
                {% if product.cover_image %}
                <img src="/static/uploads/{{ product.cover_image }}" class="card-img-top product-image" alt="{{ product.name }}">
                {% else %}
                <img src="/static/path_to_default_image.jpg" class="card-img-top product-image" alt="{{ product.name }}">
                {% endif %}
            </div>

            <div class="card-body text-center">
                <h6 class="card-title text-primary mb-2">{{ product.brand }}</h6>
                <p class="card-text text-muted fs-6 mb-3">{{ product.description | truncate(120) }}</p>
                <p class="card-text fs-6 mb-2"><strong>Ksh {{ product.unit_price }} </strong></p>

                <!-- Add to Cart Button -->
                <button type="button" class="btn btn-success btn-sm fs-6" data-bs-toggle="modal" data-bs-target="#addToCartModal{{ product.id }}">
                     Buy
                </button>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

已完成的配置 #

• 配置静态文件夹：app.static_folder = '/var/static/uploads'
• 已创建静态文件夹并成功将图片上传至持久化磁盘/var/static/uploads

磁盘文件列表 #

render@srv-cnn0go8cmk4c73ak6cf0-0:~/project/src$ cd /
render@srv-cnn0go8cmk4c73ak6cf0-0:/$ ls var/static/uploads
1000213051_20240429222907.png                   PhotoRoom-20240123_105100_5_20240429214709.png
1000216424_20240429211503.jpg                   PhotoRoom-20240123_105100_6_20240429214709.png
1000216434_20240429211503.jpg                   PhotoRoom-20240123_105100_7_20240429214709.png
1000216446_20240429211503.jpg                   PhotoRoom-20240123_105101_9_20240429222907.png
1000217105_20240429211503.jpg                   PhotoRoom-20240123_105102_10_20240429222907.png
PhotoRoom-20240112_080418_20240429224147.png    PhotoRoom-20240123_114305_3_20240429223934.png
PhotoRoom-20240114_081108_20240429224147.png    PhotoRoom-20240312_191315_20240429223357.png
PhotoRoom-20240114_082716_20240429224147.png    PhotoRoom-20240312_192344_1_20240429223357.png
PhotoRoom-20240114_104057_2_20240429223934.png  PhotoRoom-20240312_192344_3_20240429223635.png
PhotoRoom-20240123_105059_2_20240429214709.png

问题排查与解决步骤 #

1. 修正模板中的图片路径 #

你设置app.static_folder = '/var/static/uploads'后，Flask默认的/static/路由会直接映射到这个文件夹。但模板里写的/static/uploads/{{ product.cover_image }}多了一层uploads，导致实际请求路径变成/var/static/uploads/uploads/xxx.png，自然找不到文件。

修改模板中的图片路径：

<img src="/static/{{ product.cover_image }}" class="card-img-top product-image" alt="{{ product.name }}">

2. 保留/static/uploads/路径的配置方案（可选） #

如果希望维持原有URL结构，不要替换默认的static_folder，而是添加额外的静态路由：

# 将uploads所在的父目录设为静态文件夹
app.static_folder = '/var/static'
# 注册/uploads路径的路由
app.add_url_rule('/static/uploads/<path:filename>', endpoint='uploads', view_func=app.send_static_file)

这样访问/static/uploads/xxx.png就会对应/var/static/uploads/xxx.png。

3. 检查文件权限 #

确保Render运行Flask进程的用户有读取文件的权限，执行以下命令：

sudo chmod -R 755 /var/static/uploads
sudo chown -R render:render /var/static/uploads

4. 直接验证文件可访问性 #

在浏览器中输入图片的完整URL（比如https://你的应用域名/static/1000213051_20240429222907.png），如果返回404说明路径配置错误，返回403则是权限问题。

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