Django css static not load

Question

CSS not load!! I have read some similar questions but I can't solve this problem. Why I wrong?

Static directory path:

/project/static

settings.py

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

base.html

<!DOCTYPE html>
{% load static %}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
<title>title</title>
</head>
<body
{% block content %}
{% endblock content %}
</body>
</html>

Can you check your console to see if you're getting any network errors? Specifically a 404, and that will give you an idea of what URL it's trying to load the CSS from. You can also check what's been rendered on the page to see if it's what you're expecting. — wholevinski
– wholevinski, Commented Aug 25, 2017 at 11:55

Robert · Accepted Answer · 2017-08-25 12:08:47Z

2

This as per document,you can try like this

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/var/www/static/',# Here you can mention your static directory
]

urls.py

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

in your template

{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image"/>

Store your static files in a folder called static in your app. For example my_app/static/my_app/example.jpg.

answered Aug 25, 2017 at 12:08

Robert

3,4831 gold badge20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zollie · Accepted Answer · 2017-08-25 12:14:15Z

0

Try this in settings.py also:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

answered Aug 25, 2017 at 12:14

Zollie

1,2119 silver badges15 bronze badges

Collectives™ on Stack Overflow

Django css static not load

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related