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.
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 }}'
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.
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" >
I'm new to django and recently I'm following this tutorial
to write a todo-list app.
In part 2 I should customize the admin's change_list template and add an image into it.
At first I use
<img class='btn' src='static/img/on.png'>
but it turns out to be invalid.
Can anybody figure out what's the problem is? Thanks a lot.
Here is my folder structure
todo-list
todo-app
img
----on.png
----off.png
templates
admin
----change_list.html
todo-list
you can't access the static file( images, css, js ) directly in django
to serve the static files you need to use {{ MEDIA_URL }} or {{STATIC_URL}} for that How do I include image files in Django templates?, and this link
this will helps u :)