ItsMilann
ItsMilann

Reputation: 415

Why brower is not loading static files?

settings.py

STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR, 'static_in_env')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')
MEDIA_URL = '/media/'

django.contrib.staticfiles' included in installed_apps. {% load static from staticfiles %} used in base.html. still getting these errors:

[22/Dec/2019 13:45:31] "GET / HTTP/1.1" 200 10735
[22/Dec/2019 13:45:32] "GET /static/js/jquery-3.4.1.min.js HTTP/1.1" 404 
1791
[22/Dec/2019 13:45:43] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 
1788
[22/Dec/2019 13:45:43] "GET /static/css/mdb.min.css HTTP/1.1" 404 1770
......

script.html

{% load static from staticfiles %}

<script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js' 
%}"> 
</script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{% static 'js/popper.min.js' %}"> 
</script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"> 
</script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{% static 'js/mdb.min.js' %}"> 
</script>
<!-- Initializations -->
<script type="text/javascript">
// Animations initialization
new WOW().init();

</script>

staticfiles dir includes following files and folders

static_in_env

 - css
   -bootstrap.css
   -bootstrap.min.css
   -mdb.css
   -mdb.min.css
   -mdb.lite.css
   -mdb.lite.min.css
   -style.css
   -style.min.css
 - font
 - img
 - js
    -bootstrap.js
    -bootstrap.min.js
    -mdb.js
    -mdb.min.js
    -popper.min.js
 - scss

Upvotes: 0

Views: 3522

Answers (3)

bmons
bmons

Reputation: 3392

if you are using bootstap, either you download it or use cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

or you can use the starter template provided by bootstrap, which will have all the basic html,css and js files. Link: https://getbootstrap.com/docs/4.4/getting-started/introduction/ custom css links can be linked to the file as follows

<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}"/>

Upvotes: 0

KrazyMax
KrazyMax

Reputation: 959

In your project_name/urls.py, try to add the following at the end:

urlpatterns = [
    # your urls...
]

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

Also, just put {% load static %} in your script.html, not {% load static from staticfiles %}

Upvotes: 1

Sachin Singh
Sachin Singh

Reputation: 607

In settings.py add

 STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
 STATIC_URL = '/static/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
 MEDIA_URL = '/media/'

In base.html

{% load static %}

Hopefully it will work if it doesn't run this command

Python manage.py collectstatic

Upvotes: 0

Related Questions