How to view images in django html template - python

I keep getting 404 error even though the url to the image is accurate. Yes, I have looked at official django docs and a whole lot of stackoverflow posts. I couldn't figure it out from those. If anyone can decipher what the instructions are saying to do then I will be grateful because they seem to be missing information.
index.html:
#I have tried static and staticfiles
{% load static %}
#a lot of code later...
<img border="0" src="{% static "logo.png" %}" alt="TMS" width="125" height="80">
Directory structure:
projectname
->__init__.py, settings.py, ...
manage.py
db.sql3
app_name
-> admin.py, models.py, views.py, templates->index.html, ...
static
->logo.png
The only thing about static that I have in settings.py along with 'django.contrib.staticfiles':
STATIC_URL = '/static/'
My views.py file has index function which returns HttpResponse(t.render(c)) where t is the index.html template and c is Context. Could those be the issue?
The url that results is this: http://127.0.0.1:8000/static/logo.png

You are using a static directory which is outside of your app (it is in the project folder), so in settings.py you need also:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)

Related

Django static files not working for other templates except index

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/...' %}.

static files not found error in django

I know that this problem has already been asked several times here. I have searched and read a number of answers but no help. I guess, I am missing something very basic.
In my settings.py, I have:
STATIC_URL = '/static/'
STATIC_ROOT = join(APPS_DIR, "static/")
# STATICFILES_DIRS = [join(APPS_DIR, 'static')]
MEDIA_ROOT = join(APPS_DIR, 'media')
MEDIA_URL = "/media/"
In my config/urls.py, I have:
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
I have a file located at /static/core/js/jquery_countdown/jquery.countdown.min.js which I am trying to load in template as below:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="{% static 'core/js/jquery_countdown/jquery.countdown.min.js' %}"> </script>
The top of the same template looks like
{% extends "contest/base.html" %}
{% load static %}
This results in following server error:
[23/Mar/2018 10:12:08] "GET /static/core/js/jquery_countdown/jquery.countdown.min.js HTTP/1.1" 404 1858
What am I missing?
Create folder static_files in your app directory. And place all your static files inside it. Then use the following settings
STATIC_URL = '/static/'
STATIC_ROOT = join(APPS_DIR, "static/")
STATICFILES_DIRS = [join(APPS_DIR, 'static_files')]
If it does not solve your issue, then run the command python manage.py collectstatic. It will copy all the static files (Not only from your app but also from django admin, third party apps etc) to the STATIC_ROOT folder.
Details
For local serving, django server will look in to the STATICFILES_DIRS. So you dont need to run the python manage.py collectstatic command. All the external apps may have STATICFILES_DIRS where they place their static files. For production server you need to collect all these static files scattered around all your apps in to a single place. Thats what python manage.py collectstatic command will do. It will copy all the static files in to STATIC_ROOT directory
You are searching for static files in app directories only but have your file in global static files. You should use the commented STATICFILES_DIRS setting to specify all places to search for static files.
I found that this worked for me. (Development)
(I chose to name it "zStatic" to keep it at the bottom of the root (project folder), so that it isnt amidst all my apps. Easier to locate.)
Settings.py
STATIC_URL = 'zStatic/'
STATICFILES_DIRS = (
BASE_DIR/'zStatic',
)
INSTALLED_APPS =
[
...
'django.contrib.staticfiles',
...
]
base.html (base template)
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/mycss.css' %}">
</head>

Django - Display an image with static files

I have some issues with "static files" in my project
I'd like to simply load an image.
Here is my code :
views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
# Create your views here.
def D3(request):
     template = loader.get_template('appli1/D3.html')
     context = {}
     return HttpResponse(template.render(context, request))
urls.py
from django.conf.urls import url
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 
from . import views
 
urlpatterns = [
    url(r'^D3$', views.D3, name='D3'),
]
D3.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    {% load staticfiles %}
    <img src="{% static "appli1/testimg.png" %}" alt="My image"/>
</body>
</html>
settings.py
STATIC_URL = '/static/'
The image testimg.png is in appli1/static/appli1/
And the file D3.html is in appli1/templates/appli1/
Thanks for your help !
EDIT :
The structure of my project seems good to me, maybe I'm wrong. Here is what it looks like :
test_django/
manage.py
db.sqlite3
test_django/
__init__.py
settings.py
urls.py
wsgi.py
__pycache__/
...
appli1/
__init__.py
admin.py
apps.py
models.py
tests.py
urls.py
views.py
__pycache__/
...
migrations/
...
static/
appli1/
testimg.png
templates/
appli1/
D3.html
There are following issue with your code:
1) Check quotes in
<img src="{% static "appli1/testimg.png" %}" alt="My image"/>
Technically,in the above "{% static " will be read as one value, then " %}" as other, and finally "My image" as another.
Following is the correct way of doing it:
<img src="{% static 'appli1/testimg.png' %}" alt="My image"/>
This way html read it "{% static 'appli1/testimg.png' %}" as a whole inside which lies 'appli1/testimg.png'.
2) As I don't know your directory structure and hence your root directory, this might be another issue.
If in your 'appli1/static/appli1' your 'static' is at the same level as that of root directory, then it will work fine, which I think is the case as even your templates are in 'appli1/templates/appli1/' and your templates are being loaded. Hence proving that 'static' is at the root level.
Else, if its not the case, and even your templates are not loaded (Coz i'm just assuming your templates are being loaded), then your root 'static' and 'templates' folder are not the same level of root directory and hence the html and static files are not being discovered by the url you are specifying in your html.
One of the issues you might be having is that your STATIC_DIR setting in your project's settings.py file might not be configured. The Django docs have a section on that which is really easy to follow along. After you do that, when you have the {% load static %} tag, when you insert a {% static 'path/to/file.txt' %} tag, Django will look in your projects main static file and then find the app folder and then follow the path you lay out from there. for example, if your file is in an app called 'main' in static/main/images/fart.png, then all you have to do is put scr="{% static static/main/images/fart.png%}"

How to take a pre-designed webpage to django and add my own static files

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

django not found static files in the subfolder of static

django 1.6.5
My static files is under subfolder of static.
djangoprj
djangoprj
settings.py
urls.py
wsgi.py
__init__.py
static
myapp
mystaticfiles
...
apps
myapp
...
templates
*.html
...
In my templates file, I link static file as full path.
<img src="/static/myapp/images/my.png" />
But those file are not found. I got 404 error.
When change settings.py as
STATIC='/static/myapp/'
I can get those static files. But I am not want to do that. Why dose it not wok, when STATIC='/static/'? Is there some easy way to solve this problem instead of doing command manaully, such as 'collectstatic'? I have put my static file in static folder, and I have used full path in my templates file. Why does it not work? Thanks in advance.
Now that you switch the static file folder to '/static/myapp/'
You should use <img src="/static/images/my.png" /> in your tag.
Generally, you should use {% static %} template tag to do this, like below (assume STATIC='/static/').
{% load staticfiles %}
<img src="{% static 'myapp/images/my.png' %}" />
to learn more, see the tutorial, https://docs.djangoproject.com/en/1.6/intro/tutorial06/
I suggest you to read all the tutorial (part1 - part6) in https://docs.djangoproject.com/en/1.6/
So that you can know deep enough for the basis.
You can found some help in these answers also
static files problem
STATIC_URL Not Working
In my configuration I have a directory structure where static files are inside my app like this
djangoprj
djangoprj
settings.py
urls.py
wsgi.py
__init__.py
apps
myapp
...
templates
*.html
static
myapp
mystaticfiles
...
...
In settings
INSTALLED_APPS = (
...
'django.contrib.staticfiles',
...
)
STATIC_URL = '/static/'
and in templates I use 'static' tags
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'posts/style.css' %}" />
I hope this can help you

Categories

Resources