-1

I get this broken-image-icon thing when I run my flask app

    from flask import Flask
    panda = Flask(__name__)
    @panda.route("/")
    def home():
        return '''
                <body>
                    <img src="panda.jpg" 
                    alt="A picture of a panda" 
                    height="600" width="600">
                </body>
                '''
    if __name__ == "__main__":
        panda.run()

When I set the source of the <img tag to the relative or absolute path of that image (it is in the same directory as the flask app btw) the server doesn't show the image. Amazingly, when I set the source as the url of that image (it is taken from the internet) it works just fine! Could this be a problem specific to my device or maybe the web servers I use? I use Google Chrome and Microsoft Edge, same problem on both. Is it a flask thing? because the same html code works perfectly fine on its own, it is only within flask that I get this problem.

I need help, please don't answer with "just use the url then!", obviously I want to upload different images and this is just a simplified version of my actual code, this is the problem part of it, everything else is ok.

acceptable_G
  • 11
  • 2

1 Answers1

0

you need to use flask render templates.

File structure:

app.py
static
   |----test.jpg
templates
   |----index.html

app.py

from flask import Flask, render_template, url_for
app = Flask(__name__)

@app.route('/', methods=['GET'])
def index():
  return render_template('index.html')

app.run()

index.html

<html>
  <head>
  </head>
  <body>
    <h1>Index page</h1>
    <img src="{{url_for('static', filename='test.jpg')}}" />
  </body>
</html>
h1w
  • 78
  • 5