Joe Margevicius asked 12 months ago
Hi … I’m using the Raspberry Pi + Flask + Jinja to act as a web server. It works fine for controlling GPIO pins (thanks to your tutorial on that), but I can’t seem to display an image. I notice that in your tutorial, you aren’t displaying a favicon (like you do in the ESP32 tutorials in Web Servers). I tried a favicon without success, and then just tried a simple image (which is located in the same directory as the html code). …. it won’t display in a Mozilla Foxfire (though the ESP32 version does fine). Any suggestions? Here is the code I use:
python code:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route(“/”)
def index():
return render_template(‘test1.html’)
if __name__ == “__main__”:
app.run(host=’0.0.0.0′, port=80)
and here is the test1.html code:
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<link rel=”icon” type=”image/png” href=”/favicon.png”>
</head>
<body>
<div >
<img src=”photo1.jpg” alt=”the image”/>
</div>
</body>
</html>
Rui Santos Staff answered 12 months ago
Hi.
I’m not very familiar with this subject.
But, this might help: https://plainenglish.io/blog/how-to-display-images-in-python-flask
Regards,
Rui
Joe Margevicius answered 12 months ago
Thank you Rui ! … that solved it ! … it’s mandatory to have the /static/images directory ! … having the file in the /static (or other directories, even though specified in the url), won’t work. I appreciate your fast response, and talented googling! (also, the favicon came up, but it had to have a very different line of code … see below)
here is the code I used, that worked, for others who may be interested (I populated the /static/images directory with the 4 images (found by googling and capture): apple.jpg, orange.jpg, pear.jpg and favicon.png ):
<!– test2.html –>
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<link rel=”icon” href=”static/images/favicon.png”>
</head>
<body>
<div >
<h3>This is an apple</h3>
<img src=”{{ url_for(‘static’, filename=’images/apple.jpg’) }}” class=”image” />
<h3>This is an orange</h3>
<img src=”{{ url_for(‘static’, filename=’images/orange.jpg’) }}” class=”image” />
<h3>This is a pear</h3>
<img src=”{{ url_for(‘static’, filename=’images/pear.jpg’) }}” class=”image” />
<style>.image {width: 200px;}</style>
</div>
</body>
</html>
~~~~
This issue can be closed.
Joe Margevicius answered 12 months ago
… I went to https://plainenglish.io/blog, the site where you found the “answer” … there is no search function on that page. … how did you find it?
Sara Santos Staff answered 12 months ago
Great.
I’m glad the issue is solved.
Rui told me he found the website using google search.
I’ll mark this issue as resolved.
Regards,
Sara