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>

Answer 1

heroku free storage is not allow media file store, that's why your media file will be deleted after upload

because it is like testing purpose, if you want to upload and store media file on heroku you can use third party like whitenoise

go to the link and learn how to use whitenoise to upload media file on heroku, you can check this link also.

happy codding

Answer 2

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

Answer 3

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

Answer 4

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.