Images(Media) not displaying on django-heroku server

Question

I had uploaded my site Django app on Heroku server when I upload image file is successfully uploaded and image path as per settings also fetch properly but the image is not displaying it give error media file not found in a server this is settings media setting

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

this is in url.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('UserView.urls')),
    path('caterer/',include('CaterView.urls')),
]
# if settings.MediaAllow:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

this is models.py

class TypeofFood(models.Model):
    tyf_id = models.AutoField(primary_key=True,auto_created=True)
    tyf_value = models.CharField(max_length=256)
    tyf_image = models.ImageField(upload_to="typeoffood/", null=True, blank=True,default='default.jfif')

in template it fatch image like this

<center><img src="{{i.tyf_image.url}}" class="img-responsive" style="height: 200px; width: 200px; border-radius:50%" alt="Image of Caterers"></center>

Nj Nafir · Accepted Answer · 2024-06-22 18:35:35Z

9

Heroku's free storage does not allow media files to be stored, which is why your media files will be deleted after upload.

Since this is for testing purposes, if you want to upload and store media files on Heroku, you can use a third-party service like whitenoise.

Go to this link and learn how to use whitenoise to upload media files on Heroku, you can also check this link.

Happy codding

edited Jun 22, 2024 at 18:35

answered Nov 30, 2019 at 10:01

Nj Nafir

5683 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Irtaza Hussain Over a year ago

thanks, @Nj but I am already using whitenoise its still not working

bmons · Accepted Answer · 2019-11-30 09:48:40Z

6

For heroku to serve static files you need to add whitenoise package too. Install it and add the necessary configurations.

MIDDLEWARE_CLASSES = (
    # Simplified static file serving.
    # https://warehouse.python.org/project/whitenoise/
    'whitenoise.middleware.WhiteNoiseMiddleware',
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATIC_ROOT = os.path.join(BASE_DIR, "your_static_folder")

STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'

MEDIA_URL = "/media/"

MEDIA_ROOT = os.path.join(BASE_DIR, "your_media_folder")

answered Nov 30, 2019 at 9:48

bmons

3,4022 gold badges13 silver badges18 bronze badges

Comments

ilayas88 · Accepted Answer · 2020-04-22 13:13:07Z

2

In your html, you will have to serve your image like so:

{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!">

The "image.url" format in the html does not work on staticfiles/Heroku
I ran into a similar issue on Heroku, and solved my issue using these links below.

Here is a complete guide for serving images on Heroku:

https://github.com/codingforentrepreneurs/Guides/blob/master/all/Heroku_Django_Deployment_Guide.md

I would recommend going through the references also. These would be the references:

1) http://whitenoise.evans.io/en/stable/django.html

2) https://docs.djangoproject.com/en/3.0/howto/static-files/

3) https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#std:templatetag-static

edited Apr 22, 2020 at 13:13

answered Apr 22, 2020 at 13:02

ilayas88

564 bronze badges

Comments

Negar37 · Accepted Answer · 2019-11-30 09:26:56Z

1

1-Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.

2-In your settings file, define STATIC_URL, for example:

STATIC_URL = '/static/'

3-In your templates, use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE:

{% load static %}
<img src="{% static 'my_app/example.jpg' %}" alt="My image">

4-Store your static files in a folder called static in your app. For example: my_app/static/my_app/example.jpg.

answered Nov 30, 2019 at 9:26

Negar37

3621 silver badge8 bronze badges

1 Comment

Irtaza Hussain Over a year ago

paths are correct and the path that is coming from uploaded file path is also the correct issue is the file that is not storing in the server it gives server error that file not found

pranshu · Accepted Answer · 2020-01-07 11:34:50Z

0

From the Docs

The Heroku filesystem is ephemeral - that means that any changes to the filesystem whilst the dyno is running only last until that dyno is shut down or restarted. Each dyno boots with a clean copy of the filesystem from the most recent deploy. This is similar to how many container based systems, such as Docker, operate.

Hence you will need to use a third party static file storage service.

edited Jan 7, 2020 at 11:34

answered Jan 7, 2020 at 11:11

pranshu

1331 silver badge8 bronze badges

Comments

Sushang Agnihotri · Accepted Answer · 2021-09-13 05:56:09Z

0

settings.py

DEBUG = True #I got the error beacuse i changed the DEBUG to False

MIDDLEWARE = [
...
'whitenoise.middleware.WhiteNoiseMiddleware',
...
]

import os
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")

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


STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'

urls.py

urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('app_name.urls'))
]

if settings.DEBUG:
  urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

answered Sep 13, 2021 at 5:56

Sushang Agnihotri

6668 silver badges12 bronze badges

Collectives™ on Stack Overflow

Images(Media) not displaying on django-heroku server

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related