Django Academy · Pelajaran

ImageField dan Menyajikan Unggahan

Tangani gambar dan tautkan ke media saat pengembangan

ImageField dan Menyajikan Unggahan adalah pelajaran Django Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Django Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Django Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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 Pillow

Validation 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. 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “ImageField dan Menyajikan Unggahan” gratis?

Ya — teks lengkap “ImageField dan Menyajikan Unggahan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Django Academy, upgrade ke CoddyKit PRO. Kursus Django Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “ImageField dan Menyajikan Unggahan”?

Tangani gambar dan tautkan ke media saat pengembangan Kamu berlatih Django Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Django Academy?

Tidak diperlukan pengalaman sebelumnya. Django Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “ImageField dan Menyajikan Unggahan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Django Academy ini?

Ya. Setiap pelajaran Django Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Django Academy