Images(Media) not displaying on django-heroku server

static files not loading django heroku
heroku django media files
heroku images disappear
heroku css not working django
heroku static assets
heroku file manager
heroku file not found
heroku image storage

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>

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.

Heroku Django store your uploaded media files for free, be showing you guys how to connect Cloudinary with your Django app not able to store our images/ Media on our heroku server specifically. The django-heroku package automatically configures your Django application to work on Heroku. It is compatible with Django 2.0 applications. It provides many niceties, including the reading of DATABASE_URL , logging configuration, a Heroku CI –compatible TestRunner , and automatically configures ‘staticfiles’ to “just work”.

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

heroku app not showing images how to render images from s3 , i uploaded my site on heroku but its not showing the images. so i want to use to store media files on s3 and how heroku bring that images on my site. i definition INSTALLED_APPS = ( # django app 'django.contrib.admin',� Git does not support empty file directories, so you will have to create a file inside that directory as well. Whitenoise. Django does not support serving static files in production. However, the fantastic WhiteNoise project can integrate into your Django application, and was designed with exactly this purpose in mind.

heroku free stage 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

Why are my file uploads missing/deleted?, Issue. Files are uploaded to the app but then disappear or are deleted after a while. These two facts mean that the filesystem on Heroku is not suitable for https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails. For NodeJS apps. https://devcenter.heroku.com/articles/s3-upload-node. For Python apps. $ heroku login $ git init $ heroku git:remote -a django-heroku-docker $ heroku stack:set container -a django-heroku-docker # git add files and commit $ git push heroku master heroku stack:set container is important here because it would tell Heroku to use container instead of buildpacks to deploy the project.

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.

Django and Static Assets, Django does not support serving static files in production. However, the fantastic WhiteNoise project can integrate into your Django application,� Hello, I had the same problem but finally, I solved it. Here's the solution, in settings: DEBUG = False when we set debug false it will create a security lock on that' setting.py file folder, that's why if our media folder inside that folder, our server can access the media folder and images, if we set this DEBUG = True then security will off and we can access it, it's important to set the

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

Cloudinary - Add-ons, Images made simple - uploads, storage, manipulations, optimizations, Securely upload images from a browser, mobile app or the application Store Media Files Anywhere Net, Python & Django, jQuery, Java, Scala, Android, iOS and more. The available application locations for this add-on are shown below, and� It's always good for a developer to have a couple of different deployment options under their belt. Why not try deploying your site to Heroku, as well as PythonAnywhere? Heroku is also free for small applications that don't have too many visitors, but it's a bit more tricky to get deployed.

Understanding static files in Django + Heroku, jpg , you would access the image at https://www.example.com/mystaticpath/test. jpg . STATIC_ROOT. This generates the directory where files� The above command will install django-heroku which will also install django, dj-database-url, whitenoise and psycopg2 and finally gunicorn will be installed, all in the virtual environment that

9 Straightforward Steps for Deploying Your Django App with Heroku , Even though I've deployed a few Django apps using Heroku, I've that sits between the server and your web app when there's a need to show not, the paths get messed up and you'll get an error saying your app enables your Django app to serve its own static files (like images), More From Medium� web: <bash command to start production server> If you have a worker process, you can add it too. Add another line in the format: worker-name: <bash command to start worker> Add a requirements.txt. If you are using a virtual environment, execute pip freeze > requirements.txt; Otherwise, get a virtual environment!. You can also manually list the

Using WhiteNoise with Django — WhiteNoise 5.1.0 documentation, To use WhiteNoise with a non-Django application see the generic WSGI documentation. I mention Heroku in a few places as that was the initial use case which prompted me to create DON'T WRITE THIS --> <img src="/static/ images/hi.jpg" alt="Hi!" /> WhiteNoise is not suitable for serving user-uploaded “media” files. For user-uploaded media files, use S3 and django-storages. Environments. Tips: For staging, use a different Heroku app. Make sure to turn maintenance mode on when it's not in use so that Google's crawlers don't inadvertently come across it. Testing. Write tests. Tests are a safeguard, so you don't accidentally change the functionality of your

Comments
  • 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
  • thanks, @Nj but I am already using whitenoise its still not working