Menu
tl;dr version: how do I get my Flask app to load images not in the project directory?
I am building (as a fun project) a Flask app, designed as a command-line app, that loads a random image from my current working directory in the browser. Here is what the app structure looks like.
+-- imgdisplay/
+-- imgdisplay/
+-- imgdisplay.py
+-- static/
+-- styling.css
+-- templates/
+-- img.html
+-- setup.py
+-- LICENSE
+-- README.md
My setup.py has a entry_points keyword argument that is as follows:
entry_points={
'console_scripts': [
'imgdisplay=imgdisplay.imgdisplay:start_server'
]
This lets me start the command-line app imgdisplay from anywhere. I have verified that this portion works with no problem.
My imgdisplay.py code looks like the following:
from flask import Flask, render_template
import webview
import click
from random import choice
import os
import os.path as osp
import logging
app = Flask(__name__)
# logging.setLevel(logging.DEBUG)
@app.route('/')
def hello(name=None):
files = os.listdir(os.getcwd())
image = choice([f for f in files if f[-4:] == '.jpg'])
# tried the following line, but didn't work.
# image = osp.join(os.getcwd(), image)
# logging.info(image)
return render_template('img.html', name=name, files=files, image=image)
@click.command()
@click.option('--port', default=5000, help='Port', prompt='Port')
@click.option('--host', default='localhost', help='Host', prompt='Host')
def start_server(port=5000, host='localhost'):
app.run(host='localhost', port=port)
if __name__ == '__main__':
start_server()
My img.html template looks like the following:
<!doctype html>
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"></link>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styling.css') }}">
</head>
<body>
<title>Hello from Flask</title>
{% if name %}
<h1>Hello {{ name }}!</h1>
{% else %}
<h1>Hello, World!</h1>
{% endif %}
{{ image }}
{% if image %}
<img src="{{ image }}"></img>
{% endif %}
</body>
All in all, it's a very simple Flask app. Something a noob like me would build.
On my Desktop, I have a folder called images/, in which I put a single image. I can display the file name string in my browser, but I cannot display the image; I expect to see the image loaded in the browser, but all I get is the icon showing that the image cannot be found. Pardon my noobness here, but what's the crucial concept I'm missing here?
666
I can display the file name string in my browser
It 's not a browser's network feature, it's a browser local file system feature, however, when you put the path such as /home/yetship/images/test.jpg in the html like this:
<html>
<body>
<img src="/home/yetship/images"></img>
</body>
</html>
it's sure it will be not work, because if you visit you website in url: http://localhost:8080, the img tag will not find image in your pc with path /home/yetship/images instead, it will find images in http://localhost:8080/home/yetship/images,so, if you want make it display, you should following this guide to make your image directory a static directory and you should make img tag as:
<img src="image/test.jpg"></img>
instead of
<img src="/home/yetship/image/test.jpg"></img>
and flask will find the image in your image directory and display on you browser.
I hope this can help you.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
