css and other assets not loading for my django webapp-CodePudding

CSS, JS, fonts, images and other assets are not being loaded into my django app index.html. All the assets for the app are present inside the application app in my django project under "templates/assets". I have tried the other answer which I was getting as suggestion to this question but even that solution did not work for me.

[04/May/2022 05:48:50] "GET /assets/js/glightbox.min.js HTTP/1.1" 404 2311
Not Found: /assets/js/count-up.min.js
[04/May/2022 05:48:50] "GET /assets/js/count-up.min.js HTTP/1.1" 404 2308
Not Found: /assets/js/main.js
[04/May/2022 05:48:50] "GET /assets/js/main.js HTTP/1.1" 404 2284

Here is my dir tree structure :

Project Name : myproject
App name that serves index.html : app

├── app
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-38.pyc
│   │   ├── admin.cpython-38.pyc
│   │   ├── apps.cpython-38.pyc
│   │   ├── models.cpython-38.pyc
│   │   ├── urls.cpython-38.pyc
│   │   └── views.cpython-38.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── __init__.py
│   │   └── __pycache__
│   │       └── __init__.cpython-38.pyc
│   ├── models.py
│   ├── templates
│   │   ├── 404.html
│   │   ├── assets
│   │   │   ├── css
│   │   │   │   ├── LineIcons.2.0.css
│   │   │   │   ├── animate.css
│   │   │   │   ├── bootstrap.min.css
│   │   │   │   ├── glightbox.min.css
│   │   │   │   ├── main.css
│   │   │   │   └── tiny-slider.css
│   │   │   ├── fonts
│   │   │   │   ├── LineIcons.eot
│   │   │   │   ├── LineIcons.svg
│   │   │   │   ├── LineIcons.ttf
│   │   │   │   ├── LineIcons.woff
│   │   │   │   └── LineIcons.woff2
│   │   │   ├── images
│   │   │   │   ├── favicon.svg
│   │   │   │   ├── hero
│   │   │   │   │   └── phone.png
│   │   │   │   └── logo
│   │   │   │       ├── logo.svg
│   │   │   │       └── white-logo.svg
│   │   │   ├── js
│   │   │   │   ├── bootstrap.min.js
│   │   │   │   ├── count-up.min.js
│   │   │   │   ├── glightbox.min.js
│   │   │   │   ├── main.js
│   │   │   │   ├── tiny-slider.js
│   │   │   │   └── wow.min.js
│   │   │   └── mail
│   │   │       └── mail.php
│   │   ├── index.html
│   │   └── license.txt
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── myproject
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-38.pyc
    │   ├── settings.cpython-38.pyc
    │   ├── urls.cpython-38.pyc
    │   └── wsgi.cpython-38.pyc
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

settings.py

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

How do I resolve this?

index.html

<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.svg" />

<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/LineIcons.2.0.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/tiny-slider.css" />
<link rel="stylesheet" href="assets/css/glightbox.min.css" />
<link rel="stylesheet" href="assets/css/main.css" />

EDIT : As asked in comments, on changing the static path I get

[04/May/2022 06:33:36] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 1929
[04/May/2022 06:33:36] "GET /static/css/animate.css HTTP/1.1" 404 1911
[04/May/2022 06:33:36] "GET /static/css/LineIcons.2.0.css HTTP/1.1" 404 1929
[04/May/2022 06:33:36] "GET /static/css/tiny-slider.css HTTP/1.1" 404 1923
[04/May/2022 06:33:36] "GET /static/css/main.css HTTP/1.1" 404 1902
[04/May/2022 06:33:36] "GET /static/css/glightbox.min.css HTTP/1.1" 404 1929

CodePudding user response：

setting.py

STATICFILES_DIRS = [
BASE_DIR / "static",
'/var/www/static/',
]

Add this code into settings.py file in the below. and After adding try to refresh the paga by using crt shift r shortcut. It hasppens to same problem i added the above code and refresh the page with shoutcut boom. It will worked for me

CodePudding user response：

{% load static %}

<link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/images/favicon.svg' %}" />

<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/LineIcons.2.0.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/tiny-slider.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/glightbox.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />

If you want to use static files, Write "{% load static %}" and {% static 'path' %}