Serving media in development in Django - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Django serve media files during development?

In a Django project running with DEBUG=True, what happens when you add this to your urls.py?

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # your url patterns
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

What is the effect of this code on serving media files?

A It allows Django's development server to serve media files from MEDIA_ROOT at MEDIA_URL automatically.

B It configures Django to serve static files from STATIC_ROOT during development.

C It disables serving media files and requires a separate web server for media.

D It causes a runtime error because static() cannot be used with MEDIA_URL.

💡 Hint

Think about how Django handles static and media files differently in development.

The static() helper function is designed to serve files from MEDIA_ROOT at MEDIA_URL during development when DEBUG=True. This is a convenience so you don't need a separate web server for media files while developing.

📝 Syntax

intermediate

Correct syntax to serve media files in Django development

Which of the following urls.py snippets correctly enables serving media files during development?

A urlpatterns = static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

B urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

C urlpatterns += static(settings.STATIC_URL, document_root=settings.MEDIA_ROOT)

D urlpatterns += static(settings.MEDIA_ROOT, document_root=settings.MEDIA_URL)

💡 Hint

Remember the order of arguments for static() and what MEDIA_URL and MEDIA_ROOT represent.

The static() function takes the URL prefix first (MEDIA_URL) and the filesystem path second (MEDIA_ROOT). You append the result to urlpatterns to add media serving routes.

🔧 Debug

advanced

Why are media files not served despite correct settings?

You have added urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) in your urls.py and set MEDIA_URL = '/media/' and MEDIA_ROOT = BASE_DIR / 'media' in settings.py. But when you try to access /media/image.jpg, you get a 404 error. What is the most likely cause?

A The static() function only works for static files, not media files.

B MEDIA_ROOT is incorrectly set to a URL instead of a filesystem path.

C You forgot to add <code>MEDIA_URL</code> to <code>INSTALLED_APPS</code>.

D DEBUG is set to False, so Django does not serve media files automatically.

💡 Hint

Check the DEBUG setting and how Django behaves differently in production.

Django only serves media files automatically during development when DEBUG=True. If DEBUG=False, Django expects a real web server to serve media files.

🧠 Conceptual

advanced

Understanding the role of MEDIA_URL and MEDIA_ROOT

In Django, what is the difference between MEDIA_URL and MEDIA_ROOT?

A Both <code>MEDIA_URL</code> and <code>MEDIA_ROOT</code> are URL prefixes for different types of media.

B <code>MEDIA_URL</code> is the filesystem path; <code>MEDIA_ROOT</code> is the URL prefix for media files.

C <code>MEDIA_URL</code> is the URL prefix for media files; <code>MEDIA_ROOT</code> is the filesystem path where media files are stored.

D <code>MEDIA_URL</code> is used only in production; <code>MEDIA_ROOT</code> is used only in development.

💡 Hint

Think about where files live on disk versus how they are accessed via a browser.

MEDIA_ROOT is the folder on your computer or server where uploaded media files are saved. MEDIA_URL is the web address prefix used to access those files in a browser.

❓ state_output

expert

What is the output when accessing media URL with missing file?

Given this Django development setup:

DEBUG = True
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

If you request /media/nonexistent.jpg in the browser, what will happen?

A Django returns a 404 Not Found error page because the file does not exist.

B Django serves a default placeholder image automatically.

C Django raises a server error (500) because the file is missing.

D Django redirects the request to the homepage.

💡 Hint

What does a web server usually do when a requested file is missing?

When a file is not found in MEDIA_ROOT, Django's development server returns a 404 Not Found error to the browser.

Practice

1. What is the main purpose of serving media files during Django development?

easy

A. To speed up database queries

B. To improve website security in production

C. To easily view and test uploaded files while building the site

D. To automatically compress images

Solution

1. Step 1: Understand media files in development

   Media files are user-uploaded files like images or documents that developers want to see while building the site.

2. Step 2: Purpose of serving media in development

   Serving media files during development helps developers check if uploads work and display correctly without needing a full web server setup.

3. Final Answer:

   To easily view and test uploaded files while building the site -> Option C

4. Quick Check:

   Serving media in development = view uploaded files [OK]

Hint: Serving media in dev means viewing uploaded files easily [OK]

Common Mistakes:

• Confusing media serving with production security
• Thinking it speeds up database queries
• Assuming it compresses images automatically

2. Which code snippet correctly adds media serving in Django's urls.py during development?

easy

A. from django.urls import path

urlpatterns += path(settings.MEDIA_URL, settings.MEDIA_ROOT)

B. from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

C. from django.conf import settings

urlpatterns += static(settings.STATIC_URL, document_root=settings.MEDIA_ROOT)

D. from django.conf.urls import url

urlpatterns += url(settings.MEDIA_URL, settings.MEDIA_ROOT)

Solution

1. Step 1: Import correct helpers

   Use static from django.conf.urls.static and settings from django.conf.

2. Step 2: Add media URL pattern correctly

   Use static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) to serve media files during development.

3. Final Answer:

   from django.conf import settings from django.conf.urls.static import static urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) -> Option B

4. Quick Check:

   Correct import and static() usage = from django.conf import settings from django.conf.urls.static import static urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) [OK]

Hint: Use static() with MEDIA_URL and MEDIA_ROOT in urls.py [OK]

Common Mistakes:

• Using STATIC_URL instead of MEDIA_URL
• Missing import of static helper
• Using url() or path() incorrectly for media

3. Given this urls.py snippet with DEBUG=True:

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path

urlpatterns = [path('home/', lambda request: None)]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

What happens when you visit a media file URL like /media/image.jpg?

medium

A. Django serves the file from MEDIA_ROOT automatically

B. Django returns 404 Not Found error

C. Django redirects to the home page

D. Django raises a server error

Solution

1. Step 1: Check DEBUG setting effect

   When DEBUG=True, Django serves media files using the static helper in development.

2. Step 2: Understand static() behavior

   The static() function adds URL patterns to serve files from MEDIA_ROOT at MEDIA_URL.

3. Final Answer:

   Django serves the file from MEDIA_ROOT automatically -> Option A

4. Quick Check:

   DEBUG=True + static() = serve media files [OK]

Hint: With DEBUG=True, static() serves media files automatically [OK]

Common Mistakes:

• Assuming 404 error without web server
• Thinking Django redirects media URLs
• Expecting server error on media access

4. You added this to urls.py to serve media files but get 404 errors when accessing media URLs:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [ ... ]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

What is the most likely cause?

medium

A. DEBUG is set to False in settings.py

B. MEDIA_ROOT is not defined in settings.py

C. MEDIA_URL is missing the trailing slash

D. static() is imported from the wrong module

Solution

1. Step 1: Check DEBUG setting impact

   Django only serves media files with static() when DEBUG=True. If False, 404 occurs.

2. Step 2: Verify other settings

   While missing MEDIA_ROOT or wrong MEDIA_URL can cause issues, the most common cause for 404 is DEBUG=False during development.

3. Final Answer:

   DEBUG is set to False in settings.py -> Option A

4. Quick Check:

   DEBUG=False blocks static() media serving [OK]

Hint: Check DEBUG=True to serve media files in development [OK]

Common Mistakes:

• Ignoring DEBUG setting effect
• Assuming MEDIA_URL slash causes 404
• Confusing import errors with 404

5. You want to serve media files only during development and ensure production uses a real web server. Which is the best way to configure urls.py?

hard

A. Serve media files by adding them to STATICFILES_DIRS

B. Always add media serving URLs regardless of DEBUG

C. Serve media files using static() only if settings.DEBUG is False

D. Add media serving URLs only if settings.DEBUG is True

Solution

1. Step 1: Understand development vs production serving

   Media files should be served by Django only during development (DEBUG=True), not in production.

2. Step 2: Conditional URL pattern addition

   Wrap the static() call inside an if settings.DEBUG: block to add media URLs only in development.

3. Final Answer:

   Add media serving URLs only if settings.DEBUG is True -> Option D

4. Quick Check:

   Serve media URLs only when DEBUG=True [OK]

Hint: Wrap media URLs addition inside if DEBUG=True block [OK]

Common Mistakes:

• Serving media files always in production
• Using STATICFILES_DIRS for media files
• Adding media URLs when DEBUG is False