404 for static images and media in Django in Production Mode

Question

I am beginner in Django

I am trying to run my application on Debug=False mode to simulate the production environment, I have added all the static url, and roots. My program is generating the static images in real-time from the video passed to the application during runtime.

This is working as expected in the development mode but I am getting 404 for images and videos in the production mode other stuff like bootstrap and JS are getting loaded fine.

Earlier bootstrap and js was also not loading then I installed Whitenose and things start working, but now images and videos and giving 404.

Link to the application code: https://github.com/abhijitjadhav1998/Deepfake_detection_using_deep_learning/tree/master/Django%20Application

Further to this application, I have added the STATIC_ROOT in the settings.py

and added os.system('python manage.py collectstatic --noinput') in the views.py folder to populate the static path with images and videos before sending the response to the html page.

But still I am getting the 404, I also checked the file with same name is avaliable in the location.

I am getting the below error:

Error from the console: Able to load the js, bootstrap but able to load the images and video

Code from settings.py that I have added

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_DIR = os.path.abspath(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))

DEBUG = False

ALLOWED_HOSTS = ['*']

INSTALLED_APPS = [
    "whitenoise.runserver_nostatic",
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ml_app.apps.MlAppConfig',
]

MIDDLEWARE = [
        "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

ROOT_URLCONF = 'project_settings.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(PROJECT_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.messages.context_processors.messages',
                'django.template.context_processors.media'
            ],
        },
    },
]

WSGI_APPLICATION = 'project_settings.wsgi.application'

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": os.path.join(PROJECT_DIR, 'db.sqlite3'),
    }
}

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

STATICFILES_DIRS = [
        os.path.join(PROJECT_DIR, 'static'),
        os.path.join(PROJECT_DIR, 'models'),
    ]

STATIC_ROOT = os.path.join(PROJECT_DIR, 'staticfiles')

CONTENT_TYPES = ['video']
MAX_UPLOAD_SIZE = "104857600"

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

EDIT :

I added all the uploaded_images into static/images/uploaded_images, this is loading the static images but now the issue is it is not loading the images from a for loop in html file

For below the images gets loaded as expected.

  <div id="preprocessed_images" class="col-12 mt-4 mb-2">
    {% for each_image in preprocessed_images %}
    <img src="{%static 'images/uploaded_images/uploaded_file_1651078566_cropped_faces_5.png'%}" class="preprocess"
      width=auto height="250" />

    {%endfor%}
  </div>

For below it is still giving 404. the value of each image is each_image = images/uploaded_images/uploaded_file_1651078566_cropped_faces_5.png

  <div id="preprocessed_images" class="col-12 mt-4 mb-2">
    {% for each_image in preprocessed_images %}

    <img src="{%static each_image%}" class="preprocess" width=auto height="250" />

    {%endfor%}
  </div>

I am loading meadia files like this but still its 404

<video height="320" width="640" id="predict-media" controls>
      <source src="{{MEDIA_URL}}{{original_video}}" type="video/mp4" codecs="avc1.4d002a" />
    </video>

when you upload new image from django-admin, is new ones also gives 404 ? — Alasgar, Apr 25 '22 at 15:26
https://stackoverflow.com/questions/66833381/static-media-images-are-not-displaying-in-django/66834540#66834540 — Ivan Starostin, May 01 '22 at 14:49

fkay · Answer 1 · 2022-04-29T13:46:54.897

0

I think the problem is here:

<div id="preprocessed_images" class="col-12 mt-4 mb-2">
{% for each_image in preprocessed_images %}

<img src="{% static each_image %}" class="preprocess" width=auto height="250" />

{%endfor%}

You don't need the word static in there, instead do this:

<img src="{{ each_image.url }}" class="preprocess" width=auto height="250" />

edited Apr 29 '22 at 13:46

answered Apr 26 '22 at 23:43

fkay

184
1
10

I am using the default web server of Django .. and using a windows environment. In simple words, I am just running the same development environment with Debug=false – Abhijit Jadhav Apr 27 '22 at 06:15
did you run collectstatic after changing the settings? – fkay Apr 27 '22 at 13:15
Nope, not working this way also the same issue. for my case, if I add the static files in the path appname/static/appname/ nothing loads but in appname/static/ at least js and bootstrap are loading .. – Abhijit Jadhav Apr 27 '22 at 15:58
Post your settings.py file but please omit **the secret key** – fkay Apr 27 '22 at 16:05
Edited the question with setting.py and added some more code for refrence of issue, I was able to do some progress but now landed into new issue – Abhijit Jadhav Apr 27 '22 at 17:23
Look at the updated answer. Also, please make sure to include the relevant sections of your models, views, and other files that are related to the problem you are having. That helps people have a better idea of what you are doing rather than having to guess. – fkay Apr 27 '22 at 18:57
URL of the image is dynamically coming from the view.py . I have not hardcoded the url. I have added the GitHub link of the project .. can you please refer that – Abhijit Jadhav Apr 29 '22 at 06:46
Updated answer, see if that helps. – fkay Apr 29 '22 at 13:58
Bad luck its not working .. also the media URL is not working.. it looks like some issue with django server only. I am not sure if we can run the development server only with Debug=False or do I need to host the content of Apache or Ngnix – Abhijit Jadhav Apr 30 '22 at 14:26
@AbhijitJadhav I think you should ask a different question and include as much detail as needed. You should also state what you have tried and what the error is explicitly so that people don't have to guess. – fkay Apr 30 '22 at 14:55
Try this: **python manage.py runserver --insecure**. And you are right, it seems like Django won't serve static files when DEBUG=False, see this answer for more details: https://stackoverflow.com/questions/62555499/django-react-the-resource-was-blocked-due-to-mime-type-text-html-mismatch – fkay Apr 30 '22 at 21:58

score 0 · Accepted Answer · answered May 05 '22 at 15:49

Django doesn't serve static files in production automatically we will need a web server like apache/Nginx to serve the static files.

I was able to serve the static files by hosting the application on Nginx as a reverse proxy server and Gunicorn to handle Django requests. I used docker to host the application.

Step by step guide is given in this Blog

404 for static images and media in Django in Production Mode

2 Answers2