Static files in templates in Django - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Django template snippet?

Given the following Django template code, what will be the rendered HTML output assuming STATIC_URL = '/static/' and the static file css/style.css exists?

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

Django

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

A <link rel="stylesheet" href="/static/css/style.css">

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

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

D <link rel="stylesheet" href="/assets/css/style.css">

💡 Hint

Remember that {% static %} prepends the STATIC_URL setting to the file path.

The {% static %} tag generates the full URL by combining STATIC_URL and the given path. Since STATIC_URL is '/static/', the output is '/static/css/style.css'.

📝 Syntax

intermediate

Which option correctly loads and uses a static image in a Django template?

Select the Django template code snippet that correctly loads the static tag and displays an image located at images/logo.png.

A

{% load staticfiles %}
<img src="static 'images/logo.png'" alt="Logo">

B <img src="{% static 'images/logo.png' %}" alt="Logo">

C

{% load static %}
<img src="static('images/logo.png')" alt="Logo">

D

{% load static %}
<img src="{% static 'images/logo.png' %}" alt="Logo">

💡 Hint

You must load the static template tag library before using {% static %}.

Option D correctly loads the static tag library and uses the {% static %} tag with quotes around the path. Option D misses loading the tag library. Option D uses an outdated tag library and wrong syntax. Option D uses wrong syntax for the static tag.

🔧 Debug

advanced

Why does this Django template raise a TemplateSyntaxError?

Consider this Django template snippet:

{% load static %}
<img src="{% static images/logo.png %}" alt="Logo">

Why does it raise a TemplateSyntaxError?

Django

{% load static %}
<img src="{% static images/logo.png %}" alt="Logo">

A Because the static tag requires parentheses around the path.

B Because the static tag cannot be used inside an img tag.

C Because the static tag argument must be a quoted string, but here it is unquoted.

D Because the static tag must be loaded after the img tag.

💡 Hint

Check how the path argument is passed to the static tag.

The static tag requires its argument to be a quoted string. Omitting quotes causes a TemplateSyntaxError.

❓ state_output

advanced

What is the value of the rendered src attribute in this Django template?

Given STATIC_URL = '/assets/' in settings.py, what will be the value of the src attribute after rendering this template?

{% load static %}
<img src="{% static 'img/photo.jpg' %}" alt="Photo">

Django

{% load static %}
<img src="{% static 'img/photo.jpg' %}" alt="Photo">

A img/photo.jpg

B /assets/img/photo.jpg

C /static/img/photo.jpg

D /media/img/photo.jpg

💡 Hint

The static tag uses the STATIC_URL setting as prefix.

Since STATIC_URL is set to '/assets/', the static tag outputs '/assets/img/photo.jpg'.

🧠 Conceptual

expert

Which statement about Django static files in templates is TRUE?

Choose the correct statement about using static files in Django templates.

A The {% static %} tag must be loaded with {% load static %} before use, and it generates URLs based on STATIC_URL setting.

B Static files can be referenced directly without loading any tag, and Django automatically resolves their URLs.

C The {% static %} tag requires the full absolute URL including domain to work correctly.

D Static files must be placed inside the templates directory to be accessible via {% static %}.

💡 Hint

Think about how Django manages static files and the role of the static template tag.

Option A correctly describes that {% static %} requires loading the static tag library and uses STATIC_URL to build URLs. Other options are incorrect because Django does not resolve static URLs automatically without the tag, does not require full URLs, and static files should be in static directories, not templates.