CODEWITHSUNDEEP
javascriptjqueryhtmlcssdjango
Masthan Vali Syed
Masthan Vali Syed

Reputation: 397

django cannot find static files

I am building login page application. Intended login page application shown in below link. This login page has two images and alignment done using css and other files in django. When I run django server I am able to see login textboxes and static text labels, but not images and alignments is not proper, path for which is fetched from STATIC_URL or STATIC_ROOT in settings.py.

When I run the serer I am seeing error like this

[10/Mar/2020 20:18:41] "GET / HTTP/1.1" 302 0
[10/Mar/2020 20:18:41] "GET /login/?next=/ HTTP/1.1" 200 2607
[10/Mar/2020 20:18:41] "GET /login/static/dau_gui_app/fontawesome-free-5.3.1-web/css/all.min.css HTTP/1.1" 404 141
[10/Mar/2020 20:18:41] "GET /static/dau_gui_app/style.css HTTP/1.1" 404 102
[10/Mar/2020 20:18:41] "GET /static/dau_gui_app/w3.css HTTP/1.1" 404 99
[10/Mar/2020 20:18:41] "GET /static/dau_gui_app/bootstrap.min.css HTTP/1.1" 404 110
[10/Mar/2020 20:18:41] "GET /static/dau_gui_app/dataTables/datatables.css HTTP/1.1" 404 118
[10/Mar/2020 20:18:41] "GET /static/dau_gui_app/dataTables/jQuery-3.3.1/jquery-3.3.1.js HTTP/1.1" 404 132
[10/Mar/2020 20:18:41] "GET /static/dau_gui_app/dataTables/datatables.js HTTP/1.1" 404 117
[10/Mar/2020 20:18:41] "GET /static/dau_gui_app/images/logo.png HTTP/1.1" 404 108
[10/Mar/2020 20:18:41] "GET /static/dau_gui_app/images/alstom_logo.png HTTP/1.1" 404 115

My login.html looks like this:

{% load i18n %}   
{% load admin_static %}{% load firstof from future %}<!DOCTYPE html>                                                                         
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>    

<head> 


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
  
<meta http-equiv="content-type" content="text/html; charset=UTF-8">     
<link rel="stylesheet" href="static/dau_gui_app/fontawesome-free-5.3.1-web/css/all.min.css">    
<link rel='shortcut icon' type='image/x-icon' href='/static/dau_gui_app/images/favicon.ico' />

                                                                      
<link rel="stylesheet" href="/static/dau_gui_app/style.css">              
<link rel="stylesheet" href="/static/dau_gui_app/bootstrap.min.css"> 
                              
<link rel="stylesheet" href="/static/dau_gui_app/w3.css">
        
<link rel="stylesheet" href="/static/dau_gui_app/dataTables/datatables.css">  
<script type="text/javascript" src="/static/dau_gui_app/dataTables/jQuery-3.3.1/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/static/dau_gui_app/dataTables/datatables.js"></script>
                              
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static 'admin/css/base.css' %}{% endblock %}" />
{% block extrastyle %}{% endblock %}   

<title>
	{% block title %}Login{% endblock %}
</title> 
    
</head>

{% load i18n %}

<body id="login_page">	  
  
  <DIV style="margin-left:auto;margin-right:auto;padding-top:100px;display:block;width:30%">
  
  <DIV id="login_box">
	 <table id="logon_box_table"  >
	 
	 <!--  Title Bar -->
	
	 <TR >	
		<TD colspan='2' > 
		 <DIV id='login_box_title'>
	   		Login
	   	</DIV>
	 	</TD>	
	 </TR>
	
	
  <!--  login -->
	<TR >	
	
		<TD > 
			<div id= "logon-container" >
		 		<img src="/static/dau_gui_app/images/logo.png" alt=""> 
		 		<div id="alstom-logo-container"> <img src="/static/dau_gui_app/images/alstom_logo.png" alt="" style="width: 90px; height: 18px;"> </div>
				<div id="version-container" >Software Version: 4.0</div>
	 		</div> 	
		</TD>			
			 
		
		<TD style="width: 490px; height: 18px;"> 			
	    	{% block content %}

	  		<form id="loginForm" method="post">
	    		{% csrf_token %}
	    		{{ form.as_p }}    
		</TD>
	 </TR>
	 
	<TR >	
		<TD colspan='2' style="text-align:center;padding:10px">  
	 			<button style="width: 90px; height: 28px;" type="submit">Login</button>
  			</form>
		{% endblock %}
	 	</TD>
	 </TR>

	</TABLE>    
 	 
</DIV>
  
</DIV>
   
   
</body>
</html>

Settings.py has this content

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

Login Page Image view: enter image description here

Page what is displayed when Django runs: enter image description here

I looked at the solution given at enter link description here which didnt help me. please let me know if I am missing something and why Images are not shown in login page.

Upvotes: 1

Views: 2038

Answers (1)

Masthan Vali Syed
Masthan Vali Syed

Reputation: 397

@all, I am able to resolve this issue by setting DEBUG=True as it was not gone for production and doing some updates in local. Not sure really how it impacts. But it worked for me when I set DEBUG=True in settings.py

Upvotes: 1

Related Questions