Joe Margevicius asked 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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