I have checked a links for how to set an image as background for a div. I have tried various ways. But still am going wrong somewhere and would need some guidance...
Below is my directory structure:
frontend
/frontend (django project)
settings.py
.
.
/webApp (django app)
/templates
/static
img1.jpg
home.html
In my home.html I have the following line,
{% load static %}
<div style="background-image: url({% static "/img1.jpg"%}); height: 650px; width: 1920px;">
In settings.py I have,
STATIC_URL = '/static/'
But the image does not appear when the page is displayed. I get the following error.
"GET /static/img1.jpg HTTP/1.1" 404 1803
My directory structure was different and have searched a few questions before to fit my need. I still am getting confused with the urls and assigning url for the background image. Also i want it as a url and not as href to set the background-image.
How do I go about this?
Try to specify STATICFILES_DIRS in settings.py
STATICFILES_DIRS = (
"<absolute path to static folder>",
)
I made a few changes... I shifted the static folder to where my settings.py is present... And remove the / before img1.jpg in the html file... Finally it's working now...
try add but with proper path:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Related
I know there are already several threads on the topic. I've been through most of them (especially all the troubleshooting listed in this one) but I can't figure out my issue.
I am trying to use a Bootstrap template in my Django project, and I'd like to simply start by accessing the files in the /static/ directory. My project directory looks like this :
Whenever I try to load the page http://localhost:8000/static/theme/assets/css/style.css it returns a Page not found error (and obviously no CSS/JS content appears on my index).
Here are my settings:
I have debug = True
ÌNSTALLED_APPS contains django.contrib.staticfiles
settings.py looks like this :
STATIC_URL = "/static/"
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static/"),)
But I still can't access anything from the /static/ directory.
I tried to access the CSS and JS files in base.html this way :
{% load static %}
...
<link href="{% static 'theme/assets/css/style.css' %}" rel="stylesheet">
I really have no clue how I could solve this.
Thanks in advance for your help !
Is base.html properly bound to a URL and to a view function via a URL dispatcher ? Can you access that file from your browser ?
If yes, try to substitute this line
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static/"),)
with this one
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
So I am creating a Django project and put an image on an HTML page. Issue is that the server cannot see it.
This is my folder structure: mysite/app/templates/app/img/pic.png
The HTML page is in: mysite/app/templates
I tried many different scr formats, such as: <img src="../app/img/pic.png"> but it did not work.
You have to set STATICFILES_DIRS to add the folder that you want, or try to put all the static in a folder and reference it in STATICFILES_DIRS, like this:
STATICFILES_DIRS = [
BASE_DIR / "static",
'/var/www/static/',
]
the first url will be <the root of your project>/static
the second url will be that exactly.
For more info you have the docs right here: https://docs.djangoproject.com/en/3.2/howto/static-files/#managing-static-files-e-g-images-javascript-css
In app1 I am trying to load static files from app2. I set no STATICFILES_FINDERS in project settings.py, which means, Django will use default AppDirectoriesFinder when it finds static subdirectory inside app directory.
Problem:
In template files of app1, I can generate urls of static files for app1 very easily. But if I want app1 template files to generate urls for static files of app2, links are not working. How can I in app1 generate static files of app2?
App1 template file:
{% load static %}
<img src="{% static "app1/example.jpg" %}"> <!-- ok -->
<img src="{% static "app2/example.jpg" %}"> <!-- link broken -->
HTML Output:
<img src="http://localhost:8000/static/app1/example.jpg">
<img src="http://localhost:8000/static/app2/example.jpg">
I had the same problem. I handled it setting this var in settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'app1/static/'),
os.path.join(BASE_DIR, 'app2/static/'),
]
So, both dirs become avaliable in static template tag regardless from which app you're calling it.
I'm using django 2.1.
Obs:
1 - Maybe this come set by default when you use the startapp command. Idk.
2 - BASE_DIR is the abs path to settings.py.
I found a solution. Please be aware, that directory in your project folder, which is named exactly same as your project folder is not an app. At first thought it is the initial app, that is automatically created by Django, but it isnt.
If you have two apps, and you want to load static files between them, code examples above works.
Just add this to your settings.py (from the Django documentation)
STATICFILES_DIRS = [
BASE_DIR / "static",
'var/www/static/',
]
I have the following folder structure for my project.
-App1
-App2
-App3
-App4
-static
-css
-bootstrap.css
-js
-bootstrap.js
-jquery.js
-tempaltes
-base.html
Now, in my base.html file i have
But, when i view the file the css and javascript does not seem to be loaded on the page.
In my, i have
settings.py
TEMPLATE_DIRS = "Absolute-path-to-base.html"
STATIC_URL = '/static'
STATICFILES_DIRS = 'Absolute-path-to-the above static folder'
As per all the docs and posts what i understood was, we need to keep all the staticfiles in one place, viz, static folder in my case...and all the templates (including base.html) in one place. After doing so, i open the base.html in my browser to view the page...and it does not display the CSS and the javascript. Instead when i place the file (base.html) in the static folder things work fine.
Can someone point me in the right direction?
You should replace
STATIC_URL = '/static'
by :
STATIC_URL = '/static/'
and in django templates, you should use
<script src="{% static "path" %}"></script>
also add {% load staticfiles %} at the top
I'm making a simple Django project but I cannot get any images to display in my pages.
Django documentation at https://docs.djangoproject.com/en/1.3/howto/static-files/#basic-usage states
Basic usage Put your static files somewhere that staticfiles will find
them.
By default, this means within static/ subdirectories of apps in your
INSTALLED_APPS.
Your project will probably also have static assets that aren’t tied to
a particular app. The STATICFILES_DIRS setting is a tuple of
filesystem directories to check when loading static files. It’s a
search path that is by default empty. See the STATICFILES_DIRS docs
how to extend this list of additional paths.
Additionally, see the documentation for the STATICFILES_FINDERS
setting for details on how staticfiles finds your files.
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
For local development, if you are using runserver or adding
staticfiles_urlpatterns to your URLconf, you’re done with the setup –
your static files will automatically be served at the default (for
newly created projects) STATIC_URL of /static/.
You’ll probably need to refer to these files in your templates. The
easiest method is to use the included context processor which allows
template code like:
See Referring to
static files in templates for more details, including an alternate
method using a template tag.
So I did this in settings.py:
STATICFILES_DIRS = (
'/home/abc/django/project1/media/',
)
and enabled 'django.contrib.staticfiles',
In media, I have a folder img, which has various jpg files.
In my template, I have this as one of the lines:
<img src="{{STATIC_URL}}img/{{var}}.jpg">
When I'm passing var to this template via my view.
The HTML page seems to render this tag as "<img src="img/abc.jpg"> where var="abc".
But my browser refuses to display the image. What have I done wrong?
Did you see ths part in the documentation:
If {{ STATIC_URL }} isn't working in your template, you're probably not using RequestContext when rendering the template.
Do you also use RequestContext in your view to render the template?
Here is an alternative approach:
settings.py:
import os
PROJECT_DIR = os.path.dirname(__file__) + '/../'
STATIC_ROOT = os.path.join(PROJECT_DIR, 'media/')
STATIC_URL = '/media/'
In your template:
{% load staticfiles %}
<img src="{% static img/foo.jpg %}" />
If you need to pass a variable, use the prefix method:
{% load staticfiles %}
<img src="{% get_static_prefix %}img/{{var}}.jpg" />