pythonhtmldjangodjango-staticfilesstatic-files
cant load static files all settings are correct as far as i checked and added load static in templates but still its not getting the static files
cant load static files at all and when I inspect on the template in the network it says 404 not found and in the network, it's not picking the correct path even though everything in settings and template seems to be correct! Please help tried whatever I could but the issue isn't resolved tried few solutions given in the past regarding such issue but didn't work.
**settings.py**
STATIC_URL = '/static/' # the path in url
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static_files"),
]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
**base.html**
<!DOCTYPE html>
<html>
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=0">
<script src="{% static 'pludo/js/jquery.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'pludo/css/bootstrap.min.css' ">
<script src="{% static 'pludo/js/bootstrap.min.js' %}">
</script>
<link rel="stylesheet" href="{% static 'pludo/css/main.css' %}">
<script src="{% static 'pludo/js/main.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
**index.html**
{% extends 'base.html' %}
{% block content %}
<!-- {% load static %} -->
<div id="header">
<div id="companyheader" class="headerdiv">
<div class="logoDiv">
<img class="logoImg" onclick="goToHome();" src="{% static 'pludo/images/drawable-xhdpi/PluudoLogo.png' %}">
</div>
<div class="search-back-button" style="display:none;">
<img onclick="backPage();" src="{% static 'pludo/images/drawable-xhdpi/BACKBUTTON.png' %}">
</div>
<div class="searchDiv">
<img class="searchIcon" src="images/drawable-xhdpi/VIEWTEXT.png">
</div>
<div>
<label id="updateText" style="position: absolute;
right: 16px;
bottom: -15px;
color: #D5DDE1;display:none;font-family:montserratRegular;font-size:12px;height: auto;">Update</label>
</div>
</div>
</div>
<div id="loadPage">
<!-- {% block content %} -->
{% for m,n in zipped %}
<div class="container">
<!-- <h3>video Link :</h3> -->
<br>
<!-- <h3>Description : {{ m.desc }}</h3> -->
<a class="youtube" href={{ m.the_url }}>
<img src="{{ n }}" alt={{ m.desc }} width="300" height="300" />
</a>
</div>
{% endfor %}
<!-- {% endblock %} -->
</div>
<div id="footer" style="display: block;
position: fixed;
bottom: 15px;width:100%;height:50px;">
<div class="menudiv" id="footerOptions" style="display:none;">
<div class="menusearch">
<form><img class="menuImg" id="plusMenu1" onclick="displaySearch();"
src="{% static 'images/drawable-xhdpi/SEARCH.png' %}">
</form>
</div>
<div class="menuprofile">
<form><img class="menuImg" id="plusMenu2" onclick="addProfile();"
src="{% static 'images/drawable-xhdpi/PROFILE.png' %}">
</form>
</div>
<div class="menuplus">
<form><img class="menuImg" id="plusMenu3" onclick="displayAddVideo();" src="images/drawable-xhdpi/ADD.png">
</form>
</div>
</div>
<div style="position:absolute;right:5%;top:0px;width: 8%;">
<img class="openmenuImg" id="plusMenu4" onclick="showMenu();" src="images/drawable-xhdpi/MAINMENU.png">
</div>
</div>
<!-- Modal -->
<div class="modal" id="optionModel" role="dialog">
<div class="maindialog">
<div style="background-color:transparent;">
<div id="popupmenu" class="bgwhite menuoptions">
<div class="options-popup" onclick="showAllClusters();">
<img id="saveoption" class="img100withPadding" src="images/drawable-xhdpi/SAVEPOPUP.png">
<div style="position:absolute;right:-75px;color:white;top:0px;">
<p class="img100withPadding" style="margin: auto;line-height: 55px;" class="save">SAVE</p>
</div>
</div>
<div class="options-popup" style="margin-top: 22px;">
<img id="shareoption" class="p-t0" onclick="shareVideo()"
src="images/drawable-xhdpi/SHAREPOPUP.png">
<div style="position:absolute;right:-86px;color:white;top:0px;">
<p class="img100withPadding" style="margin: auto;line-height: 55px;" class="save">SHARE</p>
</div>
</div>
<div class="options-popup" style="margin-top: 22px;">
<img id="reportoption" class="p-t0" onclick="menuClick('report');"
src="images/drawable-xhdpi/REPORTPOPUP.png">
<div style="position:absolute;right:-74px;color:white;top:0px;">
<p class="img100withPadding" style="margin: auto;line-height: 55px;" class="save">HIDE</p>
</div>
</div>
<div class="options-popup" style="margin-top: 22px;">
<img id="closeoption" class="p-t10" onclick="menuClick('close');"
src="images/drawable-xhdpi/CANCELPOPUP.png">
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="optionModelWithCluster" role="dialog">
<div class="maindialog">
<div style="background-color:transparent;">
<div id="popupmenu" class="menuoptions" style=" margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-35%, -50%);width: auto;
">
<div onclick="recentClusterSave();" class="bgwhite" style="width: 62%;
padding: 22px;
border-radius: 5em;margin-bottom: 10px;position: relative;">
<img id="saveoption" class="img100withPadding" src="images/drawable-xhdpi/profile1.png">
<div style="top: 30%;
position: absolute;
right: -105px;
color: white;
">
<p class="img100withPadding" style="margin: auto;line-height:20px;width:50%" class="save">WALK
TOGETHER</p>
</div>
</div>
<div class="bgwhite" style="width: 62%;
padding: 22px;
border-radius: 5em;">
<div class="options-popup" onclick="showAllClusters();">
<img id="saveoption" class="img100withPadding" src="images/drawable-xhdpi/SAVEPOPUP.png">
<div style="position:absolute;right:-75px;color:white;top:0px;">
<p class="img100withPadding" style="margin: auto;line-height: 55px;" class="save">SAVE</p>
</div>
</div>
<div class="options-popup" style="margin-top: 22px;">
<img id="shareoption" class="p-t0" onclick="shareVideo();"
src="images/drawable-xhdpi/SHAREPOPUP.png">
<div style="position:absolute;right:-86px;color:white;top:0px;">
<p class="img100withPadding" style="margin: auto;line-height: 55px;" class="save">SHARE</p>
</div>
</div>
<div class="options-popup" style="margin-top: 22px;">
<img id="reportoption" class="p-t0" onclick="menuClick('report');"
src="images/drawable-xhdpi/REPORTPOPUP.png">
<div style="position:absolute;right:-95px;color:white;top:0px;">
<p class="img100withPadding" style="margin: auto;line-height: 55px;" class="save">REPORT</p>
</div>
</div>
<div class="options-popup" style="margin-top: 22px;">
<img id="closeoption" class="p-t10" onclick="menuClick('close');"
src="images/drawable-xhdpi/CANCELPOPUP.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="videoSaved" role="dialog">
<div class="maindialog">
<div data-toggle="modal" data-target="#videoSaved" style="background-color:transparent;">
<div class="label-cluster">
<label style="color:white;font-size:15px;font-family: montserratRegular;margin:auto;">VIDEO SAVED
IN</label>
</div>
<div id="popupmenu" class="bgwhite update-cluster">
<button id="videoSaveInCluster" onclick="removeVideos();" class="btn btn-default btn-sm" style="width: 100%;
background-color: white;
font-family: montserratBold;
color: black;
outline: none;
border-color: transparent;
font-size: 16px;
font-weight: 900;
text-align: center;border-radius: 20px;">WALK TOGETHER</button>
</div>
</div>
</div>
</div>
<div class="modal" id="showClusterList" role="dialog">
<div class="maindialog">
<div style="background-color:transparent;">
<div id="popupmenu" class="bgwhite">
<div id="clusterList" class="cluster-list">
<div>
<img onclick="hideClusterList();" style="position:fixed;right:10px;width: 6%;"
src="images/drawable-xhdpi/DOWNARROW.png">
</div>
<div>
<label class="clustor-list-heading">Select a cluster to save</label>
</div>
<div>
<div class="add-clustor-list">
<img class="profile-plus" src="images/drawable-xhdpi/profileplus.png">
<input type="text" style="position: absolute;
right: 50px;
width: 70%;
top: 50%;
transform: translate(0, -50%);
text-align: right;
border: none;font-size:12px;" id="makeClustor" placeholder="Make a new Cluster">
<img class="clear-profile-add" onclick="clearProfileAdd();"
src="images/drawable-xhdpi/SEARCHCANCEL.png">
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile1.png">
<span>Sky Fly</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile2.png">
<span>Walk Together</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile3.png">
<span>Space Craft</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile4.png">
<span>My Recipes</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile1.png">
<span>Sky Fly</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile2.png">
<span>Walk Together</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile3.png">
<span>Space Craft</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile4.png">
<span>My Recipes</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="videoUpdated" role="dialog">
<div class="maindialog">
<div data-toggle="modal" data-target="#videoUpdated" style="background-color:transparent;">
<div id="popupmenu" class="bgwhite update-cluster">
<button id="removeVideo" onclick="removeVideos();" class="btn btn-default btn-sm" style="border-radius: 30px;
width: 100%;
background-color: white;
font-family: montserratBold;
color: black;
outline: none;
border-color: transparent;
font-size:15px;
font-weight: 900;
text-align: center;">VIDEO DETAILS UPDATED</button>
</div>
</div>
</div>
</div>
<div class="modal" id="videoRemoved" role="dialog">
<div class="maindialog">
<div data-toggle="modal" data-target="#videoRemoved" style="background-color:transparent;">
<div class="label-cluster">
<label
style="color:white;font-size:15px;font-family: montserratRegular;margin:auto;width: max-content;">VIDEO
REMOVED FROM CLUSTER</label>
</div>
<div id="popupmenu" class="bgwhite update-cluster">
<button id="videoSaveInCluster" onclick="removeVideos();" class="btn btn-default btn-sm" style="width: 100%;
background-color: white;
font-family: montserratBold;
color: black;
outline: none;
border-color: transparent;
font-size: 16px;
font-weight: 900;
text-align: center;">WALK TOGETHER</button>
</div>
</div>
</div>
</div>
<div class="modal" id="accDeactivated" role="dialog">
<div class="maindialog" data-toggle="modal" data-target="#accDeactivated">
<div style="background-color:transparent;">
<div id="popupmenu" class="bgwhite update-cluster">
<button class="btn btn-default btn-sm" style="border-radius: 30px;
width: 100%;
background-color: white;
font-family: montserratBold;
color: black;
outline: none;
border-color: transparent;
font-size: 15px;
font-weight: 900;
text-align: center;">ACCOUNT DEACTIVATED</button>
</div>
</div>
</div>
</div>
<div class="modal" id="showVideoPopup" role="dialog">
<div class="maindialog">
<div style="background-color:transparent;">
<div id="popupmenu" class="bgwhite" style="border-top-left-radius: 15px;border-top-right-radius: 15px;
height: 75vh;
padding: 5%;
position: fixed;
bottom: 0px;
width: 90%;
margin-left: 5%;overflow:hidden;overflow-y:auto;">
<div id="addVideoList" class="add-video">
<div>
<img data-toggle="modal" data-target="#showVideoPopup" style=" position: absolute;
right: 2%;
top: 1%;
width: 6%;
width: 7%;
height: auto;" src="images/drawable-xhdpi/DOWNARROW.png">
</div>
<div class="video-container">
<div class="general-info">
<div class="old-search">
<label
style="font-size: 28px;font-family: montserratRegular;word-spacing:-2px;margin:auto;margin-top: 4%;">Add
a video</label>
</div>
<div class="video-div" style="margin-top:4%;">
<input type="text" id="videosearch" autofocus="autofocus"
placeholder="Paste a website url or enter link of a video" />
<img onclick="showVideoDetails();" src="images/drawable-xhdpi/grayarrow.png" />
</div>
<!--<div class="old-search" style="margin-top:8%;">
<button class="btn btn-default btn-sm" id="searchBtn" style="border-radius:30px;
width:115px;
height:45px;
background-color:#A8BEC9;
font-family:montserratRegular;
color:white;
outline:none;
border-color: transparent;
font-size: 13px;" onclick="searchVideo();">SEARCH</button>
</div>-->
<div class="infoOfSearch">
<div style="text-align:center;margin-top:8%;">
<p
style="font-size: 15px;font-family: montserratRegular !important;color:#d5dde1 !important;">
Copy and paste video url <br>from youtube, vimeo, dailymotion etc</p>
</div>
<div style="text-align:center;margin-top:13%;">
<p
style="font-family:montserratRegular;font-size: 15px;font-family: montserratRegular;color:#d5dde1;">
Kindly enter a single video url only</p>
</div>
</div>
</div>
<div class="video-details" style="display:none;">
<div>
<!--<div class="old-search" >
<label style="font-size:20px;font-family:montserratRegular;font-size: 28px;font-family: montserratRegular;word-spacing:-2px;margin:auto;font-weight: 500;color: black;">Edit details</label>
</div>-->
<div class="video-thubmnail">
<div class="thumbnailImg">
<img id="img1" class="img100"
src="https://img.youtube.com/vi/GuERa1mtDEc/maxresdefault.jpg">
</div>
</div>
<div style="text-align:center;margin-top:2%;">
<label class="video-title" id="videoTitle">EDIT TITLE</label>
<div class="video-title-desc">
<span class="textarea none" role="textbox" contenteditable>The Dyson Pure Cool™
Personal Purifying Fan Technology</span>
</div>
</div>
<div style="text-align:center;margin-top:4%;">
<label class="video-title" id="videoDescription">EDIT DESCRIPTION</label>
<div class="video-desc">
<span class="textarea none" role="textbox" contenteditable>Personally made by
@paulnicklen. I have seen a seal rest in more comfortable positions than a
superb photography example.</span>
</div>
</div>
<div style="text-align:center;margin-top:4%;">
<label class="video-title" id="videoHashTag">EDIT/ADD HASHTAGS</label>
<div class="video-desc">
<span class="textarea none" role="textbox" contenteditable>#dyson #fan
#technology</span>
</div>
</div>
<!--<div class="old-search" style="margin-top:3%;position:fixed;bottom: 15px;z-index:1;left: 50%;transform: translate(-50%, 0);">
<button id="saveCluster" onclick="showAllClusters();" class="btn btn-primary btn-sm" style="font-size: 13px;background-color:#00AFFF">SAVE IN A CLUSTER</button>
</div>-->
</div>
<div style="height:1px;background-color:gray;margin-top:2%;margin-bottom:2%;"></div>
<div id="videoClusterList">
<div>
<label style="font-size: 18px;
font-family: montserratRegular;
margin: auto;
font-weight: normal;
margin-top: 4%;
color: black;
font-weight: 500;">Select a cluster</label>
</div>
<div>
<div class="add-clustor-list">
<img class="profile-plus" src="images/drawable-xhdpi/profileplus.png">
<input type="text" style="position: absolute;
right: 25px;
width: 70%;
top: 50%;
transform: translate(0, -50%);
text-align: right;
border: none;" id="makeClustorVideo" placeholder="Make a new Cluster">
<img class="clear-profile-add" onclick="clearProfileAdd();"
src="images/drawable-xhdpi/SEARCHCANCEL.png">
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile1.png">
<span>Sky Fly</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile2.png">
<span>Walk Together</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile3.png">
<span>Space Craft</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile4.png">
<span>My Recipes</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile1.png">
<span>Sky Fly</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile2.png">
<span>Walk Together</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile3.png">
<span>Space Craft</span>
</div>
<div class="add-clustor-others-list">
<img src="images/drawable-xhdpi/profile4.png">
<span>My Recipes</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
**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('urlapp.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
#screenshot below of inspect :
Solution
try this one instead it works for me.just check the path of static files correctly
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
from . import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('urlapp.urls')),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root= settings.MEDIA_ROOT)