I'm trying to load in bootstrap into my html page but I get a 404 status code in the network tab in the developers tools saying that it could not find the file
the request url is
http://127.0.0.1:8000/static/css/bootstrap.css
this is my html page where I am trying to use to the file
<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dog Groomers</title>
<link rel="stylesheet" type="text/css" href="{% static '/css/bootstrap.css' %}"/>
</head>
</html>
Here is my file structure
in my settings.py file
STATIC_URL = 'static/'
STATICFILES_DIR = [os.path.join(BASE_DIR, 'static')]
#edit wasn't included before in question
DEBUG = TRUE
Do I need to have a static folder in every folder instead of just having it in the root?
Kindly update your settings.py
You are using this:
STATICFILES_DIR = [os.path.join(BASE_DIR, 'static')]
Try this one, it should work!
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
Related
I want to add a static file to my django project app.
My app is named "core"
Hence inside the app where I need the static file (called main.css) , I made a directory named static/core/main.css
So after that my directory looks like this
core
....
-static
|_core
|_main.css
.........
And in the settings.py file , I wrote this
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
And in the html file where I want the static css I wrote this
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} Welcome | Ecommerce {% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="{% static 'core/main.css' %}">
This HTML file is located in a global project level template folder where I dump the templates from all the apps in the project .
But my static file is not getting loaded for some reason
May be because you didn't specify the file?
I guess you should change it from
<link rel="stylesheet" href="{% static '' %}">
To
<link rel="stylesheet" href="{% static 'core/main.css' %}">
Try to add
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
into your Django settings
In Your settings.py file add this
STATIC_URL = '/static/'
if DEBUG:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
else:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
after that open the terminal in your root directory and run the following command
python manage.py collectstatic
you can also refer to the django documentation where they have explained about staticfiles in django https://docs.djangoproject.com/en/3.2/ref/contrib/staticfiles/
I use Django ,everythings works perfectly fine but i cannot load images.
My settings.py file
STATIC_URL = '/static/'
STATICFILES_DIR=[
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assets')
My html file
<!DOCTYPE html>
{% load static %}[enter image description here][1]
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>First App</title>
</head>
<body>
<h1>Yeah..! this is index.html file</h1>
<img src="{% static "images/pic1.jpg" %}" alt="Nothing to show">
</body>
</html>
Tree directory
Typo in settings.py, it's supposed to be
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
I have created a Static folder with img folder. It has a image: dog.jpg
euskaraz>euskaraz>static>img>dog.jpg
HTML template:
{% load static %}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<img src="{% static 'img/dog.jpg' %}">
</body>
</html>
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Inspecting element:
All project:
Where is the problem?
Thanks!
First, add your extra static directory to STATICFILES_DIRS settings
STATICFILES_DIRS = [
("some_cool_name", os.path.join(BASE_DIR, 'euskaraz/static')),
]
then, in your template,
{% load static %}
<img src="{% static 'some_cool_name/img/dog.jpg' %}">
I have followed too many answers to this but I need some more explanation on this topic as I want to know the root cause for it.
I am trying to create pdf using wkhtmltopdf.
This is my setting files look like :
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
And the URL to reference static file is :
<link rel="stylesheet" href="{% static '/css/template_pdf.css' %}" type="text/css" />
Or
<link rel="stylesheet" href="/static/css/template_pdf.css" type="text/css" />
or
<link rel="stylesheet" href="file:///static/css/template_pdf.css" type="text/css" />
or
I used this too:
https://gist.github.com/renyi/f02b4322590e9288ac679545df4748d3
and provided url as :
<link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}static/css/template_pdf.css' />
But the issue I understood is, all of the above except last one works perfectly while rendering view :
def view_pdf(request):
"""View function for home page of site."""
context= {'title': 'Hello World!'}
# Render the HTML template index.html with the data in the context variable
return render(request, 'pdf/quotation.html', context=context)
But for creating pdf using wkhtmltopdf it specifically needs the url to be specified like :
<link rel="stylesheet" href="http:localhost:8000/static/css/template_pdf.css" type="text/css" />
I know I am missing something in the static file. But I want to know why it works with rendering template but not with Generating pdf using wkhtmltopdf.
I dont think it is good idea to put directly domain name inside the referencing url.
A detailed solution for this would be helpful as I am very new to django.
I tried follow this answer too but nothing worked : Django wkhtmltopdf don't reading static files
in your settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
WKHTMLTOPDF_CMD = '/usr/local/bin/wkhtmltopdf'
to render static files in your template django provide static tag. You can use this as
<link rel="stylesheet" href="{% static '/css/template_pdf.css' %}" type="text/css" />
Also make sure you have this included in your urls.py
from django.conf import settings
if settings.DEBUG:
from django.conf.urls.static import static
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Don't forget to run collectstatic command in the end
I added http://localhost:8000 explicitly in my template when running in debug mode:
In the template:
<link rel="stylesheet" href="{% if debug %}http://localhost:8000{% endif %}{% static '/css/template_pdf.css' %}" type="text/css" />
And I added the debug to the context:
from django.conf import settings
def view_pdf(request):
"""View function for home page of site."""
context= {
'debug': settings.DEBUG,
'title': 'Hello World!'
}
# Render the HTML template index.html with the data in the context variable
return render(request, 'pdf/quotation.html', context=context)
I'm having trouble serving static files on my development server. I have it configured as follows. This is in my settings.py file:
STATIC_URL = '/static/'
if socket.gethostname() == 'production_server':
STATIC_ROOT = "/var/www/html/static/"
else:
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
I find a couple things curious about this:
Everything works fine on the production server.
On the development server, I get 404 errors for my own files but not the admin files...
http://localhost:8000/static/media/default.cssFailed to load resource: the server responded with a status of 404 (NOT FOUND)
http://localhost:8000/static/media/javascript/pipe.jsFailed to load resource: the server responded with a status of 404 (NOT FOUND)
http://localhost:8000/static/media/javascript/imdb_form.jsFailed to load resource: the server responded with a status of 404 (NOT FOUND)
http://localhost:8000/static/media/pipe-img/wb-mpi-logo.pngFailed to load resource: the server responded with a status of 404 (NOT FOUND)
http://localhost:8000/static/media/pipe-img/wb-mpi-logo-large.pngFailed to load resource: the server responded with a status of 404 (NOT FOUND)
...from this template...
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}media/default.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/forms.css" />
<link rel="shortcut icon" href="{{ STATIC_URL }}media/pipe-img/favicon.ico" type="image/x-icon" />
<link rel="icon" href="{{ STATIC_URL }}media/pipe-img/favicon.ico" type="image/x-icon">
<script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript" src="{{ STATIC_URL }}media/javascript/pipe.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}media/javascript/imdb_form.js"></script> <!-- FUTURE: call from IMDB widget? -->
Note that it's only complaining about the non-admin URLs.
Finally, I also noticed that if I run ./manage.py collectstatic, it collects only the admin files into my STATIC_ROOT directory, not my app's media files. Futhermore, even if I wipe out the STATIC_ROOT directory, the admin links still work.
How can I work through those 404 errors and get all my static files served up properly?
Set your STATICFILES_DIRS variable in settings.py to contain the path to where the static assets are. This should bring them in when running ./manage.py runserver with DEBUG = True
Also I would use environment vars to extend the tuple for STATICFILES_DIRS
if os.environ['deploy_type'] == 'prod':
STATICFILES_DIRS += ("/var/www/html/static/",)
else:
STATICFILES_DIRS += (os.path.join(PROJECT_DIR, 'static'),)
You can have your environment variables set as part of your deployment process and assist in having a flexible deployment process.
Sorry for the bit of a tangent and hope this helps :)