Serving images in Flask - Step-by-Step Execution

Concept Flow - Serving images

Start Flask app

↓

Client requests image URL

↓

Flask route matches URL

↓

Flask reads image file

↓

Flask sends image data with correct headers

↓

Browser receives and displays image

↓

End

The Flask app waits for an image request, reads the image file, sends it with proper headers, and the browser shows the image.

Execution Sample

Flask

from flask import Flask, send_file
app = Flask(__name__)

@app.route('/image')
def image():
    return send_file('cat.jpg', mimetype='image/jpeg')

This code serves a JPEG image file named 'cat.jpg' when the '/image' URL is visited.

Execution Table

Step	Action	Input/Request	Flask Response	Browser Behavior
1	Start Flask app	None	App running, waiting for requests	None
2	Client requests '/image'	GET /image	Route '/image' matched	None
3	Flask reads 'cat.jpg'	File path 'cat.jpg'	Image file loaded	None
4	Flask sends image data	Image bytes with mimetype 'image/jpeg'	HTTP response with image data	Browser starts loading image
5	Browser displays image	Image data received	Rendered image shown on page	Image visible to user
6	End	Request complete	Connection closed or kept alive	Image stays visible

💡 Request ends after image data is sent and browser displays it.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
app	Flask instance created	Running and waiting	Running and serving image	Running
request	None	GET /image received	Handled	None
image file	Not loaded	Loaded 'cat.jpg' bytes	Sent in response	Sent
response	None	Preparing	Image data with headers	Sent

Key Moments - 3 Insights

Why do we need to specify the mimetype when sending an image?

The mimetype tells the browser what kind of file it is receiving so it can display it correctly. See execution_table step 4 where 'image/jpeg' is sent.

What happens if the image file path is wrong or missing?

Flask will raise an error because it cannot find the file to send. This would stop the flow at step 3 in the execution_table.

Can Flask serve images without using send_file?

Yes, but send_file is the easiest and safest way to serve files with correct headers. Manually sending bytes requires setting headers yourself.

Visual Quiz - 3 Questions

Look at the execution_table, what does Flask do at step 3?

A Sends the image data to the browser

B Reads the image file from disk

C Starts the Flask app

D Displays the image in the browser

💡 Hint

Check the 'Action' and 'Flask Response' columns at step 3 in the execution_table.

At which step does the browser start showing the image?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look for 'Browser displays image' in the execution_table.

If the mimetype was missing in step 4, what would happen?

A The browser might not display the image correctly

B Flask would crash immediately

C The image file would not be read

D The client would not send a request

💡 Hint

Refer to the importance of mimetype in key_moments and execution_table step 4.

Concept Snapshot

Serving images in Flask:
- Use @app.route to define URL
- Use send_file('path', mimetype='image/type') to send image
- Browser requests URL, Flask sends image bytes with headers
- Browser displays image automatically
- Always specify correct mimetype for proper display

Full Transcript

This example shows how Flask serves images. The app starts and waits for requests. When a client asks for '/image', Flask reads the image file 'cat.jpg' from disk. It then sends the image data with the correct mimetype 'image/jpeg'. The browser receives this data and displays the image on the page. The process ends after the image is shown. Specifying mimetype is important so the browser knows how to handle the file. If the file is missing, Flask will error. Using send_file is the easiest way to serve images with proper headers.