'custom static files not loading in django project

I have a django project where I have kept all the static files in a project level static directory. I have included

STATIC_URL = "/static/"

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

in the settings.py. ALso I have added + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) to the urlpatterns in the project level urls.py.

My issue is that some of the static files load whereas some do not. For. eg. I am using django_google_maps and the (example url) http://127.0.0.1:8000/static/django_google_maps/js/google-maps-admin.js loads right and the corresponding work is done.

But when I try to load my custom js/css/any-static files, (example url http://127.0.0.1:8000/static/images/favicons/favicon.ico or http://127.0.0.1:8000/static/js/image-upload-script.js), they do not load and raise a django.views.static.serve error with 404 not found. They are right there in the directory though. I see that the static files used by third party packages are loading right but not my custom ones.

What is it that I am missing? Do we require something else to load our custom js/css files?? And yes I have used {% load static %} in my template.



Solution 1:[1]

I had been using static files at the project level and not the app level. Any new static file, I was directly adding to the static directory which was my static root as well. Now as per this answer, https://stackoverflow.com/a/12161409/5379191 ,

"Your STATIC_ROOT directory should be empty and all static files should be collected into that directory (i.e., it should not already contain static files)". So, the main thing was that it should not already contain the static files.

I created a new staticfiles folder in the project level directory, shifted my custom static files to that directory, ran the collectstatic command, and then boom it worked. So, the main thing here to remember is not to directly place your static files in the static root dircetory but rather let the collectstatic do its job.

Solution 2:[2]

Adding this worked for me:

MEDIA_URL = '/static/images/'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Raavan
Solution 2 dileepvarma