Serving images in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Flask route serving an image?

Consider this Flask route that serves an image file from the 'static' folder. What will the browser receive when accessing '/image'?

Flask

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

@app.route('/image')
def image():
    return send_from_directory('static', 'photo.jpg')

A The image file 'photo.jpg' is sent with correct headers so the browser displays it.

B The raw bytes of the image are printed as text in the browser.

C A 404 error because 'send_from_directory' cannot serve files from 'static'.

D A redirect to the home page '/' occurs instead of sending the image.

💡 Hint

Flask's send_from_directory helps serve files from folders like 'static'.

send_from_directory sends the file with proper content-type headers, so the browser shows the image.

📝 Syntax

intermediate

Which option correctly serves an image file in Flask?

You want to serve 'logo.png' from the 'images' folder inside your project. Which Flask route code is correct?

A return send_from_directory('static/images', 'logo.png')

B return send_from_directory('images', 'logo.png')

C return send_file('images/logo.png')

D return send_file('logo.png', directory='images')

💡 Hint

send_from_directory takes folder and filename separately.

send_from_directory('images', 'logo.png') correctly sends the file from 'images' folder. send_from_directory provides security against path traversal, unlike send_file with directory.

🔧 Debug

advanced

Why does this Flask code raise a FileNotFoundError when serving an image?

Look at this Flask route. It raises FileNotFoundError when accessed. Why?

Flask

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

@app.route('/pic')
def pic():
    return send_file('static/picture.jpg')

A Flask requires images to be in the 'images' folder, not 'static'.

B send_file cannot serve jpg files, only png files.

C The file path is relative and Flask cannot find 'static/picture.jpg' because the working directory is different.

D The route function is missing a return statement.

💡 Hint

Relative paths depend on where the app runs from.

send_file needs the correct absolute or relative path. If the working directory differs, the relative path 'static/picture.jpg' may not be found.

❓ state_output

advanced

What is the Content-Type header when serving a PNG image with send_file?

Given this Flask route serving 'icon.png' with send_file, what Content-Type header will the response have?

Flask

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

@app.route('/icon')
def icon():
    return send_file('static/icon.png')

A image/jpeg

B text/html

C application/octet-stream

D image/png

💡 Hint

send_file guesses the MIME type from the file extension.

send_file sets Content-Type based on the file extension. For .png files, it sets 'image/png'.

🧠 Conceptual

expert

Why is it better to serve static images via Flask's 'static' folder than via a custom route?

Choose the best reason why using Flask's built-in static folder to serve images is preferred over writing custom routes to serve image files.

A Flask's static folder is optimized for caching and efficient serving by the web server, reducing load on Flask app.

B Custom routes cannot serve image files at all due to Flask limitations.

C Serving images via custom routes always causes security vulnerabilities.

D Flask automatically compresses images only when served from the static folder.

💡 Hint

Think about performance and web server features.

The static folder is designed for static content and can be served directly by the web server with caching and compression, improving performance and reducing Flask app load.