Изображения не отображаются в веб-приложении Django, развернутом на Vercel

Я успешно развернул свое приложение локально, но при развертывании на Vercel я не могу заставить изображения отображаться.

vercel.json:

{
    "builds":[{
        "src":"XPense/wsgi.py",
        "use":"@vercel/python",
        "config":{ "maxLambdaSize":"15mb", "runtime":"python3.10" }

    }],

    "routes":[
        {
            "src":"/(.*)",
            "dest":"XPense/wsgi.py"
        }
    ]

}

settings.py:

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

проблемный ребенок: 

<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/profile_pictures/{{image}}" alt="{{image}}" class="profile-image-preview rounded-lg cursor-pointer transition transform hover:scale-110" onclick="selectImage('{{image}}', this)">
      {% endfor %}
                    
</div>

Изображения находятся в XPense/media/profile_pictures/ с XPense в качестве корня. Я пробовал перемещать изображения в общую папку и использовать <img src=«/{{image}}»... но пока ничего не получилось, я пробовал жестко кодировать url изображения и это тоже не работает, так что да... Помогите пожалуйста!

Веб-сайт развернут, и вы можете проверить его, если перейдете к регистрации нового пользователя text

Я пробовал перемещать изображения в общую папку и использовать <img src=«/{{image}}»... но пока ничего не получилось, я пробовал жестко кодировать url изображения и это тоже не работает, так что да... Помогите, пожалуйста!

Вам понадобится облачный сервис для обслуживания медиафайлов в производственных условиях. Я не знаю, предоставляет ли vercel такие услуги, но могу предложить использовать Cloudinary, который я пару раз использовал на Heroku.

Вам придется интегрировать Cloudinary в ваш проект Django.

Вы можете увидеть пример этого в этом учебнике.

Вернуться на верх