Python flask jinja image file not found

python flask jinja2

19,335

Solution 1

For Flask, you should keep the static files usually under a folder "static" and then use the url_for function. Lets say your project is called "myproject" and using your example, it should look something like:

myproject/
    app.py
    templates/
    static/
        css/
            images/
                icons/
                    resultset_previous.png

Then in the template, you can call

<img src= {{ url_for('static', filename = 'css/images/icons/resultset_previous.png') }} width="16" height="16" alt="previous" title="Previous" border="0">

Also, to answer your question about jinja versions etc, check this out

https://github.com/mitsuhiko/flask/blob/master/.travis-lowest-requirements.txt

Solution 2

See this section of the Flask documentation.

The correct way to refer to the static file from your template is:

<img src="{{ url_for('static', filename = 'css/images/icons/resultset_previous.png') }}" width="16" height="16" alt="previous" title="Previous" border="0">

19,335

Bernard

Updated on September 14, 2022

Comments

Bernard over 1 year
Newbie question.

I am using Flask, a webframe for Python. Flask uses Jinja to render the template. I do not know which version of Jinja Flask uses, nor do I know how to retrieve the Jinja version or the Flask version. I use Python version 2.7.

The template contains an image in the css/image directory. This image is visible when viewing the template as a file directly in the Firefox browser.

But not when executing Flask :
```
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello/')
@app.route('/hello/<name>')
def hello(name=None):
    return render_template('Basic.html', name=name)

if __name__ == '__main__':
   app.debug = True
   app.run()
```
The content of HTML file :
```
 <!DOCTYPE HTML>
 <html>
    <body> 

      
      {% if name %}
        <h1>Hello {{ name }}!</h1>
      {% else %}
        <h1>Hello World!</h1>
      {% endif %}

      

     <img src="css/images/icons/resultset_previous.png" width="16" height="16" alt="previous" title="Previous" border="0">

   </body>
 </html>
```
The template run fine and variable example runs as expected. But the images is not displayed. Debug returns : "GET /hello/css/images/icons/resultset_previous.png HTTP/1.1" 404 -

I run Flask in VirtualEnv as suggested in the documentation. The path to the image seems to be unknown. How can I set the path?