部署在Vercel上的Django应用图片无法显示求助

问题核心 #

Vercel的Python Lambda环境默认不会自动处理/media/路径的静态文件请求，同时部署时MEDIA_ROOT的路径映射和本地存在差异，导致图片无法被正确加载。

具体修复步骤 #

1. 修改vercel.json配置，添加media路由规则 #

更新vercel.json，新增专门处理/media/路径的路由，让Vercel直接从项目目录中读取静态文件，而不是转发到WSGI应用：

{
    "builds": [
        { 
            "src": "XPense/wsgi.py", 
            "use": "@vercel/python", 
            "config": { "maxLambdaSize": "15mb", "runtime": "python3.10" } 
        },
        {
            "src": "media/**/*",
            "use": "@vercel/static"
        }
    ],
    "routes": [
        { "src": "/media/(.*)", "dest": "/media/$1" },
        { "src": "/(.*)", "dest": "XPense/wsgi.py" }
    ]
}

注意：路由顺序很重要，/media/的路由要放在全局路由前面，这样优先匹配静态文件请求。

2. 修正settings.py中的MEDIA配置 #

确保MEDIA_ROOT的路径在部署环境中能正确指向media目录，同时建议添加whitenoise配置辅助静态文件处理（可选但推荐）：

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# 可选：添加whitenoise配置，需先执行 pip install django-whitenoise
INSTALLED_APPS = [
    # ... 其他已安装应用
    'whitenoise.runserver_nostatic',
    'django.contrib.staticfiles',
    # ...
]

MIDDLEWARE = [
    # ... 其他中间件
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

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

避免硬编码路径，使用Django的MEDIA_URL变量拼接图片地址，确保路径在任何环境下都正确：

<div id="profile-picture-selection" class="grid grid-cols-3 gap-4">
     {% for image in profile_pictures %}
          <input type="radio" name="profile_picture" id="{{image}}" value="{{image}}" style="display: none;">
          <img src="{{ MEDIA_URL }}profile_pictures/{{image}}" alt="{{image}}" class="profile-image-preview rounded-lg cursor-pointer transition transform hover:scale-110" onclick="selectImage('{{image}}', this)">
      {% endfor %}
</div>

如果模板中无法直接使用MEDIA_URL，需要在settings.py的TEMPLATES配置中添加对应的上下文处理器：

TEMPLATES = [
    {
        # ... 其他模板配置
        'OPTIONS': {
            'context_processors': [
                # ... 其他处理器
                'django.template.context_processors.media',
            ],
        },
    },
]

4. 确保media目录被包含在部署包中 #

检查.vercelignore或.gitignore文件，确保没有排除media目录（如果是固定的静态图片，需要提交到Git仓库；如果是用户上传的动态图片，Vercel的Lambda环境不支持持久化存储，必须使用AWS S3、Cloudinary等第三方云存储服务）。

内容的提问来源于stack exchange，提问作者João J