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/
Related
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.
I have a setup in a flask app where I can use a form to upload a file into the static/img directory for my application, and the metadata is stored in a record in a database.
When someone makes a request to the appropriate page, I want to read the file from the server using the filepath saved in the database.
Here's an example of the record when it's pulled from the database:
(3, 'My Info', 'My Description', 'www.url.com', 'static\\img\\aws_nameservers.PNG')
What I'd like to do is combine the last item in the above record with the url_for function to render the image stored at that location.
What I have right now is a set method that gets the last part of the file path:
{% set filepath = workshop_info[4][7:] %}
This returns img\\aws_nameservers.PNG
Then inside an img tag I have the following:
<img src="{{ url_for('static', filename=filepath) }}">
Which gives me the following result:
<img src="/static/img%5Caws_nameservers.PNG">
It seems like a simple thing, but I can't figure out how to render the string correctly inside the jinja2 template.
Thank you.
If there is a better approach than what I'm attempting, I'm happy to get corrected.
You should use the forward slash (/) instead of backslash (\) at the file path. You can replace them either in the Python code or in the template using a filter, e.g.:
{% set filepath = "img\\aws_nameservers.PNG" | replace("\\", "/") %}
{{ url_for('static', filename=filepath) }}
# Outputs: /static/img/aws_nameservers.PNG
You can also use the pathlib module to convert between the Windows and Unix style paths.
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.
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" >
I am programming a website powered by Django 1.6.3. Under news you always see a big story and on the side recent articles. Therefore, I used Bootstrap 3 and wrote a static html page serving my requirements.
Now I would like to program the logic behind this. I save all my files under static that consists of the folders css, fonts (from Bootstrap), img and js. The image folder has some subfolder e.g. news. To create a new entry on the news page I would like to open the admin page, add a news_entry and select one image that should be under the titel. How is it possible to include the image in the page? My approach was:
<img src="{% static {{ news.image_name }} %}" class="img-title">
Unfortunately I get an parsing error. Image_name is a property of my news model.
You need to access the url attribute of your image_name.
Try:
<img src="{{ news.image_name.url }}" class="img-title">
Similar question here.