Images not displaying in Django webapp deployed on Vercel

I've deploy my app successfully locally, but when deployed on vercel I can't get the images to display.

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'

problem child:

<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>

The images are located XPense/media/profile_pictures/ with XPense being root. I've tried relocating the images to a public folder and using <img src="/{{image}}"... but noting worked so far, I've tried hard coding an image url and that doesn't work either so yeah... Help please!

The website is deployed and you can check it out, if you go to register a new user text

I've tried relocating the images to a public folder and using <img src="/{{image}}"... but noting worked so far, I've tried hard coding an image url and that doesn't work either so yeah... Help please!

You would need a cloud based service to serve your media files in production use. I do not know if vercel provides such services but I can suggest using Cloudinary which I've used on Heroku a couple of times.

You would have to integrate Cloudinary into your Django project.

You can see an example of it in this tutorial.

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