I want to display static images and CSS file
settings.py
STATIC_PATH = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = ( BASE_DIR +"/articles/static",)
STATIC_ROOT = os.path.join(BASE_DIR,"static",)
In Template I am trying display the images from img folder
article.html
{% load staticfiles %}
<img src = "{% static '/img/default-by.gif' %}" alt = "left slide"/>
Folder Structure
The folder structure where I have tried to access static images according to the django docs https://docs.djangoproject.com/en/1.9/intro/tutorial06/
Folder Structure
NewsArticles
-->articles
--> static
-->articles
-->img
-->default-by.gif
db.sqlite3
manage.py
media
NewsArticles
README.md
static
templates
I am using firebug to check the image location its showing as mentioned http://127.0.0.1:8000/static/img/default-by.gif
You are giving wrong path for your image. It should be like this
{% load staticfiles %}
<img src = "{% static 'articles/img/default-by.gif' %}" alt = "left slide"/>
Hope this will works.
Related
I am developing an agency web app with django templates & static files. But I am having trouble with loading static files on pages other than index.
Here's my folder heirarchy.
Again, I am having no problems loading static files on my index page.
Here's code of my additional page services.html (one I am trying to load static files on):
{% extends 'base.html' %}
{% load static %}
{% block content %}
...
...
...
{% endblock %}
My base.html is working totally fine with the homepage index.html.
I've included this on my settings.py
STATIC_URL = '/static/'
STATIC_ROOT = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
And, my views.py and urls.py files are working fine too.
Also my CSS file is correctly linked to the services.html file. I can tell this from the inspection.
Here's the error list shown on inspection. Help will be appreciated. Thank you.
Your static files are stored in the core folder, so one way is to change the settings.py to :
STATIC_URL = '/static/'
STATIC_ROOT = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'core/static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
The other way is to use python manage.py collectstatic. A new staticfiles directory will be created which has folders for admin (the built-in admin has its own static files), staticfiles.json, and whatever directories are in your static folder.
RESOLVED.
I was apparently not using Django HTML tags to link my static CSS/JS files.
So, I initialized static files on my base.html with {% load static %} and replaced links with href="{% static 'assets/css/style.css' %} format. This worked out. Remember that full path shouldn't be written i.e {% static './static/assets/...' %} instead just use {% static 'assets/...' %}.
I am trying to load the static path of the image which is not working but the static path of the css files are working perfectly . I have tried every different way but still getting 404
this is i am trying to access the image which is inside the folder of ip in static folder
<div class="col-auto">
<img src="{% static 'ip/best.png' %}"/>
</div>
I have load the static block above
{% load static %}
and the settings.py configuraion of static url
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
I believe this is a media file so you need to add this to the project settings:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
VENV_PATH = os.path.dirname(BASE_DIR)
STATIC_ROOT = os.path.join(VENV_PATH, 'static_root')
you can add the folder to it and refer to it
I finally made it to run 'python manage.py collectstatic' to upload staticfiles to my S3 bucket.
But after running 'sudo service apache2 restart', my page doesn't load staticfiles although my S3 Bucket has 'static' directory including all static files.
How can I solve this problem?
I include static files like below :
{% load compress %}
{% load static from staticfiles %}
{% compress css %}
<link rel="stylesheet type="text/css" href ="{% static 'bower_components/.../bootstrap.css' % /}
...
{% endcompress %}
My settings.py is below:
STATIC_URL = S3_URL + '/static/' # which is the path of the static directory included in my S3 Bucket
STATIC_ROOT = STATIC_URL
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/'),
)
Is there anything I'm missing now?
Pls tell me. Why ../static/image.jpg show images, and ../media/image.jpg now show
Need write url? Need change Setting? i dont fiend answer in documentation.
pls help.
2 night search answer.
Need upload from admin-panel photo and show in templates.
<img src="{{ tovar.product_img.url }}">
To display image you need load the static files in your template before referencing them. This is how you should display a picture in your template:
{% load staticfiles %}
<img src="{% static 'image.jpg' %}">
This image needs to be stored in your static folder. ../YourApp/YourApp/static/image.jpg is where I keep my static folder. Obviously it would be better to structure it further with images folder inside the static folder etc..
In your settings file you need the following lines:
# Static asset configuration
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = 'staticfiles'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
This should do the trick for you.
In settings.py
MEDIA_ROOT = '/path/to/yourmediafolder/'
MEDIA_URL = '/media/' # whatever but it should same in `urls.py`
In urls.py
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT}))
Then in template
<img src="{{ MEDIA_URL }}images/imagename.jpg"/>
Note: Here image should be as '/path/to/yourmediafolder/images/imagename.jpg'
Complete example:
I have an image test.jpg as '/home/me/test.jpg
MEDIA_ROOT = '/home/' # or /home/me/ but change url in image src
MEDIA_URL = '/media/'
#urls.py same as above
In template
<img src="{{ MEDIA_URL }}me/test.jpg"/> # or <img src="{{ MEDIA_URL }}test.jpg"/> as or condition above in MEDIA_ROOT.
Note that {{ MEDIA_URL }}me , no / between them because MEDIA_URL='/media/
You can test by:
http://domain.com/media/me/test.jpg # or http://domain.com/media/test.jpg as OR condition in MEDIA_ROOT
in local:
http://localhost:8000/media/me/test.jpg #in locally
This works (in the html img tag):
src="(left squiggly, percent) static poc.image.name (percent, right squiggly):
...and thanks to whoever pointed out that ImageField has a name in addition to a (useless) path and (useless) url e.g.:
>>> from nutr.models import *
>>> poc=POC.objects.get(pk=87)
>>> poc.name
'Edgar'
In Django==2.0.2 use {% get_media_prefix %}
From the docs
I've designed a single page,including an 'index.html' and some css and 'js' files in separate folders. Then i decided to take my web page to django so that i can add database and a little management system to some contents in my web page. But I can't work it out. this is how I tried it so far.
url.py
urlpatterns = patterns('',
# Examples:
url(r'^$', 'mysite.views.home', name='home'),
)
views.py
def home(request):
return render_to_response('index.html')
setting.py
TEMPLATE_DIRS = ('/var/www/html/mysite/templates',)
I've put my index.html files and it's relatives folders into templates folder. But when i run the server it shows my homepage without recognizing my css and 'js' files.
I'm wondering what's the right way to do that.
Thanks for your help.
--Update 1--
So referring to this document I've set my static file stuffs like this
I've Created 'static' folder in my project ND Added one more line in 'setting.py'
PROJECT_PATH = os.path.realpath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(PROJECT_PATH, 'static')
STATIC_URL = '/static/'
Then I transferred all my 'css' and 'js' files to that folder.
I added this two lines to my home page to check if it works
{% load staticfiles %}
<img src="{% static "/img/b-img-4.jpg" %}" alt="My image"/>
Also I tried this command
python manage.py collectstatic
This is the error line for the new '' tag I added.
[24/Dec/2014 19:27:29] "GET /img/b-img-4.jpg HTTP/1.1" 404 2163
--Update 2--
I found out my mistake. I changed my <img> tag like this
<img src="{% static "admin/img/b-img-4.jpg" %}" alt="My image"/>
But problem is that it just recognizes its default static files and folders. I add my own file and folders and ran python manage.py collectstatic But It doesn't show the new files I add.
This is my folders srtructure
mysite--
|
mysite
| |
| static
| |
| my css js files
|
templates
|
index.html
What am I doing wrong?
You are nearly there, but you shouldn't be putting the other resources (JS, CSS, images) into the templates folder. That's only for templates! You need to read the static files docs:
https://docs.djangoproject.com/en/1.7/howto/static-files/
This is needed to ensure proper separation of your code (which includes templates - they are a kind of server-side code) and your resources.
(If you come from a PHP background, you might be frustrated by this, because it seems more complicated than PHP where you can just mix them together. However, the way that PHP mixes these things is a really bad idea that leads to multiple security vulnerabilities).
Your static folder is not where it's supposed to be. Try this:
mysite
static
js
css
images
b-img-4.jpg
If your image is placed as shown in the above tree, this should work:
<img src="{% static "images/b-img-4.jpg" %}" alt="My image"/>
So This blog made it all Crystal clear and with these settings I could make it works
setting.py
STATIC_URL = '/static/'
PROJECT_PATH = os.path.realpath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(PROJECT_PATH, 'static')
STATICFILES_DIRS = (
os.path.join(PROJECT_PATH, 'static_assets'),
)
index.html
{% load static from staticfiles %}
<img src="{% static 'img/author.jpg' %}" alt="My image"/>
Folder Structure
mysite--
|
mysite
| |
| static
| |
| my css js files
|
static_assets
|
templates
|
index.html