Django cannot find images under templates - django

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

Related

Django : Page Not Found when trying to access static files

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"),)

How can I apply bootstrap to my whole django project?

I've been looking at a few guides on applying bootsrap to django, and I am as far as having a static file in the root of my site, containing the css and js files within bootstrap, but when it comes to linking the files I am having an issue.
So I am trying to link the stylesheet inside of my base.html file but am not sure how to format it as for some reason using {% %} inside of the href field is being interpreted as part of the directory. In one of the videos I have watched he links it like thisBut I'm not really sure how to interpret this as trying to apply it to my own like so
href = "{% static 'artForAll/css/bootstrap.css' %}"
With the file structure for reference:
\AFA\src\artForAll\static\artForAll\css
I am given an error about a non existent file as it is taking the {%%} as part of the directory
My settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,"static"),
]
File structure(blue highlighted file is where BASE_DIR leads:

Problem while loading static files|| django

iam learning Django i have learned pretty much. I used static method to rendered css and other static files. But changes iam making to css which is in static files are not reflacting on webpage . i have to close all files and restart vscode again to see those changes. I have not added code because im not getting any error at all .
( example :: i have changed font size of all anchors . Normally it should be changes on webpage after saving and refreshing the page. but in this case font size is not changing. i have to close all files and reopen them and after starting the server again i can see those changes which i made to anchor tag. )
Any one who knows why because to see changes restart whole project will never be a good option. thanks in Advance
At the beginning of your code use {% load static %} and where ever you want to use the files from static folder use {% static 'name of your file' %}
Make sure you've not added your static folder in your base directory. In such case update your settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
you can use whichever name you like instead of assets

Django - Load static files from another app

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/',
]

Adding image as a background for a django template

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"),
)