URL_for with static files in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What URL does url_for('static', filename='style.css') generate?

In a Flask app, you use url_for('static', filename='style.css') inside a template. What URL will this produce by default?

A /style.css

B /static/style.css

C /staticfiles/style.css

D /assets/style.css

💡 Hint

Think about the default folder Flask uses for static files.

Flask serves static files from the /static URL path by default. So url_for('static', filename='style.css') returns /static/style.css.

📝 Syntax

intermediate

Which url_for call correctly references a static image?

Choose the correct Flask url_for syntax to get the URL for logo.png inside the static/images folder.

A url_for('static', filename='/images/logo.png')

B url_for('static/images', filename='logo.png')

C url_for('static', filename='images/logo.png')

D url_for('static', 'images/logo.png')

💡 Hint

Remember the filename argument is a relative path inside the static folder.

The filename parameter should be the relative path inside the static folder without a leading slash. Option C is correct.

🔧 Debug

advanced

Why does url_for('static', filename='css/style.css') return 404?

You have a file at project/static/css/style.css. Your template uses url_for('static', filename='css/style.css') but the browser shows a 404 error. What is the most likely cause?

A The static folder is renamed or moved, so Flask can't find the file.

B The filename argument should not include subfolders like 'css/'.

C You must use <code>url_for('static', filename='/css/style.css')</code> with a leading slash.

D Flask does not serve static files by default; you must add a route.

💡 Hint

Check if the static folder location matches Flask's configuration.

Flask serves static files from the folder named 'static' by default. If the folder is renamed or moved, the URL will 404. The filename can include subfolders and should not start with a slash. Flask serves static files automatically from the static folder.

❓ state_output

advanced

What is the output of this Flask template snippet?

Given this Flask template code:

<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

And the app is running with default static folder, what will the rendered HTML look like?

A <link rel="stylesheet" href="/assets/css/main.css">

B <link rel="stylesheet" href="/css/main.css">

C <link rel="stylesheet" href="static/css/main.css">

D <link rel="stylesheet" href="/static/css/main.css">

💡 Hint

Remember how url_for builds URLs for static files.

The url_for('static', filename='css/main.css') call generates the URL /static/css/main.css. So the rendered HTML uses that URL in the href attribute.

🧠 Conceptual

expert

How to serve static files from a custom folder using url_for?

You want Flask to serve static files from a folder named assets instead of the default static. Which setup and url_for usage is correct?

A Set <code>app = Flask(__name__, static_folder='assets')</code> and use <code>url_for('static', filename='file.js')</code>

B Keep default app and use <code>url_for('assets', filename='file.js')</code>

C Set <code>app = Flask(__name__, static_url_path='/assets')</code> and use <code>url_for('static', filename='file.js')</code>

D Rename the folder to <code>static</code> and use <code>url_for('assets', filename='file.js')</code>

💡 Hint

Check Flask's static_folder parameter and how url_for references static files.

To serve static files from a custom folder, set static_folder='assets' when creating the Flask app. The url_for call still uses 'static' as the endpoint name. Option A is correct.