Welcome to part 4 of the the Flask 101 Series.
- Flask 101: Create a Basic Python Web App
- Flask 101: Add JSON to your Python Web App
- Flask 101: Use HTML templates & send variables
- Flask 101: Serve Images – This tutorial
- Flask 101: Serve CSV Files
For this tutorial, we will create a random image generator.
Also the full code for this project is available on my GitHub repo.
1 – Setup
# Install flask pip install flask
Create the following directory and files, leave them empty for now. We fill fill them later.
static/ myapp.py runapp.sh
As in part 3, you will need some images to serve. For simplicity you can just download the ones on my GitHub repo here.
2 – Create your flask application
So far your directory structure should look like this
static/ img1.jpg .. more images ... myapp.py runapp.sh
Now open the file named myapp.py that you have created above, and add the content below. We are basically doing 3 things there:
- def random_image()
this one is in charge for returning one of the images inside your static/ directory at random
this is the main – and only – route of this app. It takes a random image and serves it through the send_file() method.
from flask import Flask, send_file import os import random app = Flask(__name__) def random_image(): """ Return a random image from the ones in the static/ directory """ img_dir = "./static" img_list = os.listdir(img_dir) img_path = os.path.join(img_dir, random.choice(img_list)) return img_path @app.route('/') def myapp(): """ Returns a random image directly through send_file """ image = random_image() return send_file(image, mimetype='image/png')
3 – Run your app
In the same directory as myapp.py, create a file named runapp.sh with the following contents.
export FLASK_APP=myapp export FLASK_ENV=development flask run
Close the file, then in the command line, run it with
# Execute this in the command line inside the same directory bash runapp.sh
You should see the following output
* Serving Flask app "myapp" (lazy loading) * Environment: development * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 319-407-766
5 – Test your app