flask image not displaying using img tag

Question

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

score 0 · Answer 1 · answered Dec 14 '21 at 17:42

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.

score 0 · Answer 2 · answered Dec 14 '21 at 17:58

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 }}'

flask image not displaying using img tag

2 Answers2