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)
- Python method chaining in functional programming style
- flask-jwt-extended: Fake Authorization Header during testing (pytest)
- For loop through the list unless empty?
- Polars make all groups the same size
- Is there a way to specify a default base-template for all templates in django?
- How to tackle time limit exceeded error in leetcode
- Is pd.get_dummies() updated in newer versions of Pandas making it default to Booleans (True/False) instead of (0/1)?
- What's the function like sum() but for multiplication? product()?
- How to type hint a dynamically-created dataclass
- Issue with pulling the data with EIA API with Python
- 403 Forbidden Error when scraping a site, user-agents already used and updated. Any ideas?
- Fullstack web-hosting services
- How to handle an AnalysisException on Spark SQL?
- Python requests is slow and takes very long to complete HTTP or HTTPS request
- Is there a way to modify an element in a Numpy array based on the value of other elements?
- Tkinter grid manager height/width nonconsistent
- Sql Alchemy Insert Statement failing to insert, but no error
- How can I create a Polars struct while eval-ing a list?
- Excel using win32com and python
- django: on pypy, psyco, unladen swallow or cpython, which one is the fastest?
- How convert a list into multiple columns and a dataframe?
- Name not defined in type annotation
- Static type checkers and Language Servers not recognizing attributes of objects that are subclasses
- How do I get multiple OID values in PySNMP?
- how to log a file in Django
- Is there a simple and efficient way to evaluate Elementary Symmetric Polynomials in Python?
- Iterating over two lists one after another
- Python -i flag for production
- What is PyCompilerFlags in Python C API?
- How to make Python check whether a variable is a number or letter