This question already has an answer here:
Reference template variable within Jinja expression
(1 answer)
Closed 8 months ago.
I am trying to load an image like so:
<img src="{{ url_for('static',filename='output/{{ file_name }}.png') }}">
and this is how I send the file_name variable:
return render_template("somefile.html", file_name=filename)
filename is a variable inside my python code.
I keep getting 404 errors even though my image is inside my static folder inside the 'output' folder. any ideas?
error message:
GET /static/output/%7B%20file_name%20%7D HTTP/1.1" 404 -
it seems like the string formatting fails
Definitely a string formatting error
Do this instead
<img src="{{ url_for('static',filename='output/{}.png'.format(file_name) ) }}">
Related
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 1 year ago.
I am trying to display an image that is not in static folder but inside a logos folder.
The folder where my app.py is situated is this
app.py
static
logos <--- I want to access image from this folder.
{% for company in companies %}
{% if company.logo %}
<img src="/logos/{{company.logo}}" width="200" height="85"/>
{% endif %}
{% endfor%}
In HTML inspect element it comes properly as
<img src="/logos/59a94931df425f3034d2.jpg" width="200" height="85">
The file actually exists but the image is not displayed in webpage
The logos directory must be inside the static directory, in order to allow python to find the image and return that to the browser. In fact, if you check the console, you will see error 404: Not Found
So, put logos directory inside static and replace the url with:
src="logos/logos/{{company.logo}}.jpg"
Another way could be using url_for function (always inside your html file):
{{url_for('static', filename = f'logos/{company.logo}')}}
Let me know if it works.
Essentially what barbax has said, but your images to be rendered need to be within a static folder, and give this as the root directory when providing the path in html, e.g if this is your folder structure:
<ROOT>
└── app
└── static
└── logos
This should be your src value:
src='static/logos/{{ company.logo }}'
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 1 year ago.
I work with blueprint in Flask, and my blueprint is initialized like this:
my_blueprint= Blueprint('my_blueprint', __name__,
template_folder='templates',
static_folder='static')
I want to display pictures in my HTML template using <img src="{{ picture.uri }}" alt="..."> where picture.uri is the path to the picture. I built this path using os.path.join('/uploads/', f_name]) where f_name is the filename of the picture.
My directory is built this way:
app
--templates
--static
--uploads
--__init__.py
I don't understand how I can render my picture in the HTML template. What I need to put into the 'src' field of my img tag?
Thanks for your help.
You can load static file using
{{ url_for('static', filename='path/to/file.jpg') }}
Will load file from PROJECT_ROOT/static/path/to/file.jpg
Keep in mind that this is for development use only, you have to resolve assets from webserver on production.
This question already has answers here:
Using Heroku for Django Media Files
(2 answers)
Closed 3 years ago.
My database images get deleted from Heroku but the logo is not deleted.
I use static to display the logo in this form :
<img src="{% static 'img/techshelta_logo.png' %}">
but my database images are displayed without using static:
<img src="{{ object.image.url }}" class="img-fluid" alt="object.title">
Is that the reason why Heroku deletes them?
NOTE
When I try to use static as in the example below to display the DB images locally they are not show
<img src="{% static 'object.image.url' %}" class="img-fluid" alt="object.title" >
These three lines mean three different instructions in my opinion.
Instruction 1
<img src="{% static 'img/techshelta_logo.png' %}>"
This means to load the techshelta_logo.png from the img subfolder of the static directory. This should work always as the http server is unlikely to delete on its own under normal circumstances
Instruction -2
<img src="{{ object.image.url }}" class="img-fluid" alt="object.title">
This instruction means that you are passing object from your view to template. The object has an attribute image which has a field url. Since this is stored in database as the full location/path where the image is saved, this is likely to work as well.
Instruction 3
<img src="{% static 'object.image.url' %}" class="img-fluid" alt="object.title" >
'object.image.url' is most likely storing the full path of the image. When you are putting this instruction after static tag then the static path (defined in SETTINGS.py) is prepended to the already full path given by 'object.image.url'. The net result is a path that does not exist and thus the image can't be shown.
Having said all these I don't know why Heroku is deleting the images. Could be some instructions that are missing your attention that are getting passed to the database or it could be something subtle. I can't comment on that.
Hope this helps. If further clarifications are needed please let me know.
A Flask route passes a variable called imgloc to the Jinja template of the full path to an image file on the server. How do I refer to this in an image tag in HTML? The code:
<img src="{{url_for(filename=imgloc)}}">
does not work. Printing out the variable imgloc works fine , so it is being correctly passed to the template. In essence:
<img src="{{WHAT_GOES_IN_HERE}}">
It should be:
<img src="{{ url_for('static', filename='img/cat.png') }}">
It will be pointed to the /path/to/project/static/img/cat.png
A simple google search would have solved the issue, they have everything in docs.
Docs: https://flask.palletsprojects.com/en/1.1.x/tutorial/static/
This question already has answers here:
Vue.js in Django Templates
(2 answers)
Closed 4 years ago.
I have a png image in static folder of my Django app which works fine when called from html file as below:
<img src="{% static 'app1/emojis/celebration.png' %}">
But when i have
img_name:"<img src=\"{% static \'app1/emojis/celebration.png\' %}\" alt=\"img_error\" >"
in javascript file and I render it in html as <span v-html="img_name"> </span>
the image is not shown. instead the alternate text "img_error" is shown.
A normal html tag without any static file is rendered correctly:
in Javascript:
h_tag:"<h1> hello </h1>"
in Html:
<span v-html="h_tag"> </span>
So how can i make Vue understand the folder path to static files in Django.
I am not asking how to change delimiters for Vue when using with Django.
Both lines of code below work exactly the same way in Django:
The second method works for Vue too. so its convenient to use the second method.
<img src="{% static 'app1/emojis/celebration.png' %}">
<img src="/static/app1/emojis/celebration.png" >