ImageField und Uploads bereitstellen
Bilder verarbeiten und in der Entwicklung auf Mediendateien verlinken
ImageField und Uploads bereitstellen ist eine kostenlose Django Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Django Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Django Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why ImageField
For pictures, use ImageField instead of FileField. It works the same but adds image-specific checks and helpers on top.
avatar = models.ImageField(upload_to='avatars/')Pillow Is Required
ImageField depends on the Pillow library to read images. Install it first or migrations will refuse to run. 🖼️
pip install PillowValidation Built In
ImageField verifies an upload is a real image. A renamed .txt file gets rejected during form validation automatically.
Width and Height
Set width_field and height_field and Django records each image's dimensions into those columns on save.
photo = models.ImageField(
upload_to='pics/',
height_field='h', width_field='w')Display the Image
In a template, point an img tag at the field's .url to render the stored picture for the user.
<img src="{{ profile.avatar.url }}" alt="avatar">Guard the URL
Calling .url on an empty field raises an error. Wrap it in an if check so missing images do not crash your page.
{% if profile.avatar %}
<img src="{{ profile.avatar.url }}">
{% endif %}Provide a Default
Give the field a default image path so users without an upload still see a placeholder avatar.
models.ImageField(default='avatars/blank.png')Serving in Dev
Django will not serve media on its own. In development, add a route from MEDIA_URL to MEDIA_ROOT in your project urls.
urlpatterns += static(
settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)Only When DEBUG
That media helper is for development only. In production a real web server serves uploads, so guard the route with a DEBUG check.
if settings.DEBUG:
urlpatterns += static(...)Production Serving
In production let Nginx or a storage service like S3 serve media directly. Routing every image through Django would be slow.
Thumbnails Later
Need resized versions? Libraries like django-imagekit generate thumbnails on top of ImageField when you are ready.
Quick Check
Let us check what ImageField needs to function.
Recap
You learned that ImageField needs Pillow, validates real images, exposes .url for display, and that production should serve media outside Django. 🎉
Häufig gestellte Fragen
Ist die Lektion „ImageField und Uploads bereitstellen“ kostenlos?
Ja — der vollständige Text von „ImageField und Uploads bereitstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Django Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Django Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „ImageField und Uploads bereitstellen“?
Bilder verarbeiten und in der Entwicklung auf Mediendateien verlinken Du übst Django Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Django Academy zu starten?
Keine Vorkenntnisse erforderlich. Django Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „ImageField und Uploads bereitstellen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Django Academy-Lektion Code schreiben und ausführen?
Ja. Jede Django Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- STATICFILES und der static-Tag
- collectstatic für Production
- MEDIA_ROOT und Datei-Uploads
- ImageField und Uploads bereitstellen