Unable to load Static files using Django

Issue

Tried loading static files: CSS, Javascript using django static tag
None of the Javascripts is working, and most of the css are also not loaded

Error for Javascript(for all JS):

The script from “http://127.0.0.1:8000/static/jquery.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

Django version: – 3.0.1

My files and code:

Base.html>>

{% load static %}

<link rel="stylesheet" type="text/css" href={% static 'animate.css' %}>
<script src="{% static 'jquery.min.js' %}"></script>

settings.py>>

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
STATIC_ROOT = os.path.join(BASE_DIR, "assets")

I am not using any virtual environment.

My project folder tree.
My project Folder and sub directories

Solution

put your static files in your my_app/static/ (rather than creating another my_app subdirectory), where my_app is an app folder inside the main project folder. also create a folder with name same as that of your app name inside static folder and place your static files there. which would properly distinguish between your static files.
so your final app directory structure look like

my_app/
|____static/
     |____my_app/
          |____css/
          |        # your css files
          |____js/
          |        # js files
          |___images/
                   # your image files

and update your base.html with

<link rel="stylesheet" href="{% static 'my_app/css/main.css' %}" /> 

Hopefully that works.

Answered By – mohammed wazeem

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published