I want to print an image by using a img src tag in a Django template file "base.html":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Foto</title>
</head>
<body>
<h1>My helpful timestamp site</h1>
<img src="google.png" / >
<hr>
<p>Made by ... </p>
</body>
</html>
In views.py I define:
def hello(request):
return render_to_response('base.html')
But the image does not show up in the browser. If I open it as a simple html file, it shows up in the browser.
In recent versions of django
<img src="{% static 'path/to/image.ext' %}"/>
That happens because Django does not know the path to this image.
Make a folder named static/, and then a folder named images/ in your project root(where your settings.py file resides).
my_project/
my_project/
settings.py
static/
images/
google.png
And then change it to:
<img src="{{STATIC_URL}}images/google.png" / >
More here.
You have got to add load static tag in the beginning of your Django template, best luck with below code.
{% load static %}
<img src="{% static 'path/to/image.ext' %}"/>
Related
I already have a Django project with many apps and one of them is demo_app. I have some views and templates added to the demo app but I want to start using tailwind in the demo_app templates. I have seen that to add tailwind I need to create the theme app using tailwind but I want to add it to the already existing demo_app. How can I do that?
You can create the theme app just like the documentation says and add the tags to your existing app. I followed the process in this link. The js config in the app already looks for the tailwind tags in other apps. The tags I used are
{% load static tailwind_tags %} and {% tailwind_css %}. I added them to the html template in my existing app.
{% load static tailwind_tags %} at the top of the template and {% tailwind_css %} in the <head>
What I did that worked for me was install tailwind-cli in the static folder of my Django app, check out the tailwind-cli installation guide Tailwind Documentation. And then load the CSS in the HTML template. Below is how I referenced the tailwind CSS.
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'main.css' %}" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold">
Hello, world!
</h1>
</body>
</html>
If I structure the first two lines of my HTML doc like this:
{% load static %}
<!DOCTYPE html>
It appears that none of the javascript or CSS run properly, and the webpage displays like this:
However, if I put any character after the {% load static %} expression,
For example, if I structure the first two lines of my HTML doc like this:
{% load static %}.
<!DOCTYPE html>
Then the scripts and CSS components run properly and the webpage displays as it should. Why is this?
Figured it out. For some reason, the content security policy that I had implemented was causing this issue. After removing the CSP, the static files began to behave in-line with expectations regardless of the presence/absence of a character after {% load static %}.
{% load static %}
<!DOCTYPE html>
You did it right but you have load the static files too like i did below.
<!-- js -->
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<!-- js -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.js' %}"></script>
You have to use this tag to load static files in template "{% static %}" this is the syntax for load static files.
#And give it the path in settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
And store css and js in static folder in your project too.Than its gonna work.
Make sure that the STATIC_URL of your settings is correct.
according to django's documentation:
When you raise Http404 from within a view, Django loads a special view devoted to handling 404 errors. By default, it’s the view django.views.defaults.page_not_found(), which either produces a very simple “Not Found” message or loads and renders the template 404.html if you created it in your root template directory.
, i created a 404.html file in the root template directory.
when the app raises a 404 error, this 404.html that i created before, will shown, but it's css and it's background image not load.
this is the 404.html file code:
<!DOCTYPE html>{% load staticfiles %}
<html>
<head>
<title>not found</title>
<link rel="stylesheet" href="{% static 'css/error_style.css' %}"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body class="color-404">
<div id="error">
<img class="error-image" src="{% static 'img/404.jpg' %}"/>
</div>
<div class="error-router">
<i class="fa fa-home"></i>
<i class="fa fa-arrow-left"></i>
</div>
</body>
</html>
how can i fix this problem?
tanx
Not really an answer to your question, but in general it is best to not have external .js and .css files in error-pages.
Include it in the page itself, to avoid situations like this, where for some reason the error-page produces an error. Use a single static page.
I found what was the problem.
because i set DEBUG to False, django's built-in webserver, was not served staticfiles.
When I use the url(r'^consultar/$', 'rcb.core.views.consultar'), in browser http://localhost:8000/consultar the consultar.html file find the jquery-1.11.2.min.js file, appearing the following information:
Remote Address:127.0.0.1:8000
Request URL:http://localhost:8000/static/js/jquery-1.11.2.min.js
Request Method:GET
Status Code:200 OK
But when I use the url(r'^proposta/consultar/$', 'rcb.core.views.consultar'), in browser http://localhost:8000/proposta/consultar/ the consultar.html file not find the jquery-1.11.2.min file.js. Appearing the following error:
Remote Address:127.0.0.1:8000
Request URL:http://localhost:8000/proposta/static/js/jquery-1.11.2.min.js
Request Method:GET
Status Code:404 NOT FOUND
Could someone help me fix the code to run the url http://localhost:8000/proposta/consultar/
Below is the code and the structure of files and directories:
consultar.html
{% extends 'base.html' %}
....
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
</head>
<body>
{% block corpo %}{% endblock %}
</body>
</html>
views.py
def consultar(request):
propostas_salvas=search()
return render_to_response('consultar.html', { 'propostas_salvas' : propostas_salvas}, context_instance=RequestContext(request))
My structure of files and directories is:
rcb (Project)
core (is the App)
static
js
jquery-1.11.2.min.js
template
base.html
consultar.html
views.py
...
...
...
You should use path to javascript relative to your domain, not to document you're requesting, because for each document relative path to javascript would be different. So change that line:
<script src="../static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
into:
<script src="/static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
Or even better, load static in your template and use static file management built into django:
<script src="{% static "js/jquery-1.11.2.min.js" %}" type="text/javascript"></script>
That way you can change later your STATIC_URL in settings and django will correct path to your static files. Even if they are on different domain (some CDN or no-cookie domain just for your static files).
I'm new to Django, and i'm having hard time including css styles in a template.
I read this and tried to do the same but it's not working for me.
my Template:
{% load static %}<html><head><link href="{% get_static_prefix %}/style.css" rel='stylesheet' type='text/css' /></head><body>
the HTML i get:
<head><link href="C:/Users/Nayish/workspace/am/src/am/static/style.css"rel='stylesheet'type='text/css' /></head>
Note that this is the folder containing my css.
Thanks, Boris.
Make sure you haven't mixed up the STATIC_ROOT and STATIC_URL settings.
STATIC_ROOT defines where the files are on the storage system (usually your local hard disc for local development), while STATIC_URL defines the URL from where the server serves them. The second one is usually referred to in templates, and it is also the value that the {% get_static_prefix %} template tag returns.
I am guessing you aren't using static css sheets. I always just do:
<html>
<head>
{%block stylesheet %}
<style type="text/css" title="currentStyle">
#import "{{MEDIA_URL}}css/style.css";
</style>
{% endblock stylesheet%}
....
I then set my Media root, and store the files as
MEDIA_ROOT=<fullyquallified patyh>/Media/css/<css files>
MEDIA_URL=http://localhost/mysite/
It should be noted that STATIC_URL defaults to MEDIA_URL if its not defined.