I am using Django views to display some images in a folder. The program is able to search for the files but not able to display, there is a 404 error for all the images.
views.py
import os
from datetime import datetime
now = datetime.now()
image_now = now.strftime("%d_%m_%Y")
image_list=[]
app_static_dir = os.path.join(os.path.join(os.path.join(os.path.join(settings.BASE_DIR,'index'),'static'),'{}'.format(image_now)),'demo')
for file in os.listdir(app_static_dir):
if file.endswith("1_plate.jpg"):
image_list.append(file)
html
{% for file in image_list %}
<img src="{{ file }}" alt="">
{% endfor %}
Use the {% static %} template tag to prepend the correct static root directory.
{% load static %}
{% for file in image_list %}
<img src="{% static file %}" alt="" />
{% endfor %}
You also have to configure the staticfiles app correctly as described in the docs:
Managing static files (e.g. images, JavaScript, CSS)
Related
I have a very simple question, on which i spent hours.
Heres the deal: i insert a path to an image in mongodb, save said image in my static folder (under objectId.png) and pass the objectId to my template in order to display it.
Heres some code, in views:
return render(request,'resultat_simulation.html',{'truc':truc2})
truc2=str(truc.id), truc being the object inserted in the DB.
It is passed to the template without issue.
Now, the template:
{% extends 'base.html' %}
{% load static %}
{% block body %}
{{truc}}
<img src="{% static 'C:\Users\smeca\Documents\projetfinal\stage\app\static\images\{{truc}}.png' %}">
{% endblock %}
If instead of {{truc}}, i put the ObjectId of any image, it is rendered.
I just want to append the string form of objectid to '.png' so i can loop through the images and display them all.
I tried everything i found on the net to no avail.
Thanks in advance.
{% with 'stage/app/static/images/'|add:truc|add:".png" as image_static %}
{{image_static}}
<img src="{% static image_static %}">
{% endwith %}
{{image_static}} returns .png
Solution :
Finally i straight up passed the path to the template
return render(request,'resultat_simulation.html',{'image_path':'/images/' + str(truc2) + '.png'})
and loaded it with {% static image_path %}
You can not use a variable with double brackets {{ }} inside template logic {% %}.
The workaround in order to use a variable along a static tag is to use the add tag:
{% with "first/part/of/your/path"|add:truc|add:".png" as image_static %}
<img src="{% static image_static %}">
{% endwith %}
I wonder how (if it is possible) load thumbnail for static files with easy-thumbnails package.
I tried:
<img src="{% thumbnail 'img/V.png' 50x0 %}" />
<img src="{% thumbnail static 'img/V.png' 50x50 %}" />
<img src="{% static thumbnail 'img/V.png' 50x50 %}" />
but nothing works.
The registered tag filters for easy-thumbnail package are not implemented in a way to render images from the static directory directly. Rather it expects an instance of Image/FileField model (Doc Reference). But you can implement your own filter, redirect the url to static directory and use it based on your needs.
Here, you can adopt one of the following strategies as well.
{% load static thumbnail %}
{% thumbnail image 50x50 crop="center" as thumb %}
{% if thumb %}
<img src="{{ STATIC_URL }}{{ thumb.url }}" width="{{ thumb.width }}" height="{{ thumb.height }}" alt="" />
{% else %}
<img src="{{ STATIC_URL }}img/V.png" alt=""/>
{% endif %}
or
{% load static thumbnail %}
{% thumbnail object.image|default:'{{ STATIC_URL }}img/V.png' 50x50 %}
or by using a custom tag filter to redirect the url of the image instance, if you use S3 bucket instance for static files.
settings.py
S3_ROOT_PATH = "<define your S3 hosting path>"
teamplatetags/s3static
from settings import STATIC_URL, S3_ROOT_PATH
from django import template
register = template.Library()
#register.filter
def s3_static_thumb(image_instance=None):
return "{s3_root_path}{static_path}{image_url}".format(s3_root_path=S3_ROOT_PATH, static_path=STATIC_URL, image_url=getattr(image_instance, "url")) if image_instance and hasattr(image_instance, "url") else None
finally, use that in your template:
{% load static thumbnail s3static %}
{% with image|s3_static_thumb as im_url %}
{% thumbnail image "720x306" crop="center" %}
{% if im %}
<img src="{{ im_url }}" width="{{ image.width }}" height="{{ image.height }}" alt=""/>
{% else %}
<img src="{{ STATIC_URL }}img/V.png" sizes="50x50" alt=""/>
{% endif %}
{% endwith %}
I have two templates that go together, one inside the other. The inner one has an icon that needs to change according to the content of the parent template.
I've tried to pass the icon path using a variable:
src="{% url 'main_bar_icon' %}">
and I added this line of code in the parent template:
{% with main_bar_icon='../static/dist/img/logout-icon.svg' %}
{% include 'main_bar.html' %}
{% endwith %}
So, this is my inner template:
{% block main_bar %}
<a href="">
<img class="app-main-bar-icon"
src="{% url 'main_bar_icon' %}">
</a>
{% endblock main_bar %}
And this is my parent template:
{% block content %}
{% with main_bar_icon='/dist/img/logout-icon.svg' %}
{% include 'main_bar.html' %}
{% endwith %}
{% endblock content%}
In the browser I get this:
<img class="app-main-bar-icon" src(unknown) alt="icon">
Unfortunately, the {% url ... %} templatetag, can be only used to retrieve urls for the views defined in the urlpatterns.
For your needs, you will need either:
use plain variable, since you already assign path to the variable, simply: <img class="app-main-bar-icon" src="{{ main_bar_icon }}">
or, for more future proof solution, you can configure django static files and use {% with main_bar_icon='dist/img/logout-icon.svg' %} and then <img class="app-main-bar-icon" src="{% static main_bar_icon %}">
If I am passing in a variable to a template via an include...
{% include "module.html" with id=someVar %}
on the other side, how can I place it inside a dot noted path in order to call an object from a source?
<img class="brand-logo" src="{% static data.someVar.logo %}">
I was just over thinking it - all I had to do was pass in the following:
{% for module in modules %}
{% include "module.html" with data=module %}
{% endfor %}
Then I can use:
<img class="brand-logo" src="{% static data.content.logo %}">
It's my first approach to matplotlib.
I have been trying for a while to print my plots in a template. I know how if I do this for just one image, but now I'm trying to modify it and call different images.
I got this and it works perfectly:
<img src="{% static "/consulta/imagenes/rosavientos.png" %}">
But I'm trying to use this path: "/consulta/imagenes/rosavientos.png" like this:
<img src="{% static {{ my_path }} %}">
But ID or literal expected after static.
Is it possible to do this in any way?
PS: I also tried this:
In my view:
ruta_estatica = "<img src = \"{% static '/consulta/imagenes/" + nombre_png + ".png' %}\">"
In the template:
{% autoescape off %}{{ respuesta3 }}{% endautoescape %}
You can use the with tag to create a variable and use that in the static tag
{% with '/consulta/imagenes/'|add:nombre_png|add:'.png' as image %}
<img src="{% static image %}"/>
{% endwith %}
As I had the same problem and the provided answer by #Brobin was a little bit confusing to me I'll try to clarify it a little bit more.
Considering you have the variable:
{{ my_path }}
and you want to use it inside the function:
<img src="{% static 'some path here...' %}">
you can directly input the variable inside the static function without the {{ }} as follows:
<img src="{% static my_path %}">
Now lets assume you want more complex processing like having an 'item' from the 'my_path' as if it was a list of paths and also include some other text to that as a path or file type, you'll have to use the with function:
{% with final_path='MainSite/videos/My_Sample_Video_'|add:my_path.0|add:'.mp4' %}
<source src="{% static final_path %}" type="video/mp4">
{% endwith %}
Hope that helps.