Why static files are not loading? | Django

Question

I'm trying to load static files, but it's showing following error:

GET http://127.0.0.1:8000/static/css/user/style.css net::ERR_ABORTED 404 (Not Found) - home:25
GET http://127.0.0.1:8000/static/css/user/style.css 404 (Not Found) - home:25
GET http://127.0.0.1:8000/static/img/logo.png 404 (Not Found) - home:149
GET http://127.0.0.1:8000/static/img/logo.png 404 (Not Found) - home:1

MY CODE:

-ADMIN

settings.py

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

urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('Welcome.urls')),
    path('auth/', include('Authentication.urls')),
    path('ad/', include('Ads.urls')),
    path('user/', include('UserDashboard.urls')),
    path('admin/', include('AdminDashboard.urls')),
]

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

• APPS

template

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

Dirs Structure

CODE EXPLANATION

• Simply added static files in the root dir and tried to import them in template but css files are not loading
• But some media files are successfully loaded like this media <link rel="shortcut icon" type="image/jpg" href="{% static 'img/logo.png' %}" />.
• Also in dir structure, we can see img and css folder at same place in static folder and images from image folder are loaded but css from css folder does not.

Answer 1

I had a similar issue and managed to fix it with these lines in settings.py:

BASE_DIR = Path(__file__).resolve().parent.parent

INSTALLED_APPS = [
#
'django.contrib.staticfiles',
#
]


STATIC_URL = '/static/'
#for this, create the 'statics_files' directory in your project
#folder
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static_files')]

#when deploying, specify the static_root setting as below
#for example, if you are deploying to a VPS root folder and your 
#application is call 'myproject'
STATIC_ROOT = '/root/myproject/static/'
#after specifying the STATIC_ROOT setting, you run the
#'collectstatic' command (*python manage.py collectstatic*)
#this will collect static files to your static root in a new 
#folder called 'static' and everything will work as expected

Answer 2

I faced a similar situation on static images files. After checking your settings.py

Your configuration:

STATIC_URL = '/static/'

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

STATIC ROOT is only necessary when you are deploying your website.

SOLUTION

In the django 4.1 version, If you are in development you can simply use the below in settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS= [
    BASE_DIR / 'static', 
]

Here, under STATCTICFILES_DIRS, 'static' is your folder name in which you have saved types of static files.

NOTE - double check on {%load static%} in your template.

Hope this helps!

Answer 3

Settings.py

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

urls.py

+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Add these after closing bracket of urlpatterns.

Fire this command python manage.py collectstatic

Before all this setup create a static folder inside your project folder. Hope this works for you

Answer 4

STATICFILES_DIRS = [BASE_DIR / 'assets']

STATIC_URL = '/static/'

STATIC_ROOT = BASE_DIR / 'static'

MEDIA_URL = '/media/'

MEDIA_ROOT = BASE_DIR / 'media'

add the following codes to your settings.py

be sure you have assets directory with the files you need . create static and media folder in your root directory .

if you are using DEBUG=True , then you don't need to set anything about static files in your main urls.py . so you can exclude these lines . they are used for DEBUG=False

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

and in the end run

python manage.py collectstatic

command and you are all set .