I am using Django 1.8 for my project but the problem is my static files are not loading into the template. I have followed each steps in detail, but still don't know why it is not loading.
Template file
{% load staticfiles %}
<!DOCTYPE html>
<html>
<!-- This code is only meant for previewing your Reflow design. -->
<head>
<link rel="stylesheet" href='{% static "css/boilerplate.css" %}'>
<link rel="stylesheet" href='{% static "css/index.css" %}'>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>
<body>
Settings.py
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn', 'staticfiles')
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn', 'media')
STATICFILES_DIR = (
os.path.join(BASE_DIR, 'static'),
)
Project Directory
Could anyone tell me why the static files are not loading? The page source in browser is accurately showing the file path. When i click on it, it is showing me the css content but it is not loading when I run the server.
Page Source:
<!DOCTYPE html>
<html>
<!-- This code is only meant for previewing your Reflow design. -->
<head>
<link rel="stylesheet" href='/static/css/boilerplate.css'>
<link rel="stylesheet" href='/static/css/index.css'>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>
<body>
urls.py file
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^', AboutView.as_view(), name='index-template'),
url(r'^register/', RegistrationListView.as_view(), name='register'),
url(r'^form/', RegistrationForm.as_view(), name=''),
]
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Inspect Element Result:
You are missing an 'S' in the spelling of STATICFILES_DIRS.
Once you correct that, do a python manage.py collectstatic and restart the dev server.
Related
Following is the my static folder structure:
ProjectABC
- App1
- App2
- App3
- ProjectABC
- resources
- static
- imgs
- css
- templates
This is how the project structure looks like.
This is how the static configuration in settings.py looks like:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
This is how the base.html looks like:
<!doctype html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-
scale=1, user-scalable=0">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Open+Sans:400,600,800">
<title>{{SITE_NAME}}</title>
<link rel='shortcut icon' href= "{% static 'img/favicon.png' %}"/>
<link href="{{STATIC_URL}}css/application.css" media="screen" rel="stylesheet"
type="text/css" />
<link href="{{STATIC_URL}}css/style.css" media="screen" rel="stylesheet"
type="text/css" />
<script src="{{STATIC_URL}}js/application.js" type="text/javascript"></script>
{% block extracss %}
{% endblock %}
</head>
<body>
<div class="container">
<h1>Hello</h1>
</div>
</body>
</html>
All the static files are being loaded as seen in terminal, but in browser its just loading bare html without any css or img:
Please lemme know if i am missing something.
Thnk You!
<link href="{%static 'css/style.css' %}" media="screen" rel="stylesheet"
type="text/css" />
add settings.py
STATIC_URL = "/static/"
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
Project App Url
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),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Static directory must be under the app itself. Create a 'static' directory directly to your app and for better practice, you can also create another directory to the static directory with your app name (static/[app_name]).
Also, {% load static %} must be above doctype in your base.html
change the static config in your settings.py to this:
STATIC_ROOT = os.path.join(BASE_DIR, 'resources/static')
STATIC_URL = 'resources/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'ProjectABC')
]
then run python manage.py collectstatic
and when you call the static file do it like this {% static 'css/style.css' %}
I stored my static files in project root directory but I can't make them load on the browser.
configurations
settings.py
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIR = [
STATIC_DIR,
]
template file
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<h1>{{temp}}</h1>
<h2>Click here to veiw user details</h2>
<img src="{% static "user/images/smile.png"%}" alt="oh oh didn't show"/>
</body>
</html>
In the file urls.py add the static url.
urlpatterns = [
path('admin/', admin.site.urls),
...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
I'm having alot of trouble either understanding how to properly host my static files on both local and heroku. Currently when Debug is turned off, I get an error 500- otherwise it works fine.
I've read quite a few SO posts but so far, no solution has helped. I've also tried to host staticfiles on AWS, but this has still not helped.
Edit
I currently get a 500 error on any page but the admin console.
Error from django server:
[27/Nov/2019 13:36:07] "GET / HTTP/1.1" 500 9061
Error from web console:
Failed to load resource: localhost1/: the server responded with a status of 500 (Internal Server Error)
Below is my code:
settings.py
INSTALLED_APPS = [
'widget_tweaks',
'django_select2',
'masterform',
'tempus_dominus',
'team',
'sms',
'opportunities',
"rest_framework",
'import_export',
'whitenoise.runserver_nostatic',
'django.contrib.staticfiles',
]
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
STATIC_ROOT = os.path.join(BASE_DIR, "live-static", "static-root")
urls.py
from django.views.static import serve
from bdsurveyapp import settings
urlpatterns = [
url('', include('opportunities.urls')),
url(r'^sms/', include('sms.urls')),
url(r'^admin/', admin.site.urls),
path('accounts/', include('django.contrib.auth.urls')),
url(r'^dashboard/', include('dashboard.urls')),
path('login/', auth_views.LoginView.as_view(template_name='pages/login.html'), name="login"),
path('logout/', auth_views.LogoutView.as_view(template_name='pages/logout.html'), name="logout"),
url(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),
]
partial base.html
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
{{ form.media.css }}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'img/site.webmanifest' %}">
<link rel="mask-icon" href="{% static 'img/safari-pinned-tab.svg' %}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
I had a similar issue and I found that when I commented out 'django.contrib.staticfiles' in INSTALLED_APPS my issues were fixed.
I am getting a 404 error with my static files in production. The weird thing is that django-rest-framework and admin put there static files in the correct directory that I set up. I am using Digitalocean to host my site.
Directorys:
-django_project
- django_project
- templates
- media
- static
- apps etc
settings.py:
SATICFILES_DIRS = (
'/home/django/django_project/static/',
)
STATIC_URL = '/static/'
STATIC_ROOT = '/home/django/django_project/static/'
urls.py:
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
base.html:
{% load static %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Application</title>
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
</head>
Try changing your urls to this:
if settings.DEBUG:
urlpatterns += patterns('',) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += patterns('',) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
You need to include the initial url patterns.
I am trying to load some images into a template but it continues to appear as broken link
My files and directories are as follows
1.views.py
def home(request):
#template = loader.get_template("polls/home.html")
return render_to_response('polls/home.html',
context_instance=RequestContext(request))
2.urls.py
urlpatterns = patterns('',
#url(r'^applications/', include('polls.urls')),
url(r'^admin/', include(admin.site.urls)),
(r'^', include('polls.urls')),
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
3.home.html
{% load staticfiles %}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>psdtowebSimpleWebsiteTemplate.psd</title>
<link href="{% static 'C:\Users\omars_000\Desktop\mytask\polls\templates\polls\styles.css' %}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="background">
<div id="background"><img src="{{MEDIA_URL}}/Capture.png"></div>
</body>
</html>
4.settings.py
MEDIA_ROOT = os.path.join( PROJECT_DIR, 'media')
MEDIA_URL = '/media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR, "static"),
'/var/www/static/',
)
Any idea why it is not working? I have checked many questions but nothing helped so far.
Your MEDIA_URL already has a trailing slash. You are adding another in <img src="{{MEDIA_URL}}/Capture.png"> Most browsers don't care, but perhaps yours does.
Got it.
In home.html I fixed to be as follows:
<div id="background"><img src="{% static "C:\Users\omars_000\Desktop\mytask\mytask\media\images\background.png" %}""></div>
and in settings.py I added the location of the images i will be using in the template as follows:
STATICFILES_DIRS = (
'C:\Users\omars_000\Desktop\mytask\mytask\media\images',
'C:\Users\omars_000\Desktop\mytask\mytask\media',
)