Markdown
Cara Embed Gambar di Materi: Mudah, Rapi, dan Siap Dipublish
Menambahkan ilustrasi ke materi tidak harus rumit. Dengan Markdown yang didukung gambar, user cukup menaruh tautan gambar ke dalam isi materi dan gambar akan tampil otomatis di halaman publik.
Di project ini, sistem sudah mengizinkan tag img di proses render Markdown. Artinya, user bisa menambahkan gambar dengan cara yang familiar dan cepat, tanpa perlu menulis HTML rumit setiap kali.
Cara paling sederhana adalah menulis format Markdown standar berikut:
Penulisan itu akan menghasilkan gambar yang muncul di halaman materi. Teks di dalam tanda kurung siku menjadi teks alternatif atau alt text, yang berguna untuk aksesibilitas dan saat gambar gagal dimuat.
Contoh yang lebih jelas untuk pembaca
Contoh ini mudah dibaca dan cocok untuk materi yang membutuhkan visual pendukung seperti ilustrasi, foto aktivitas kelas, atau infografis sederhana.
Catatan penting sebelum mengunggah gambar
- Gunakan URL yang bisa diakses publik.
- Hanya dukung skema http dan https.
- Gambar biasanya tampil dengan alt dan loading yang aman.
- Hindari atribut ukuran yang terlalu rumit seperti width/height custom jika tidak diperlukan.
Ini penting agar materi tetap ringan, aman, dan nyaman dibuka dari perangkat mobile maupun desktop.
Kalau pakai file dari Supabase
Untuk file yang disimpan di Supabase Storage, biasanya user cukup memakai URL publik dari bucket yang sudah diset aksesnya. Format umumnya seperti ini:
Dengan cara ini, gambar bisa langsung diakses dari materi tanpa perlu mengunggah file ke layanan lain.
Alternatif jika ingin pakai HTML
Kalau memang user ingin lebih eksplisit, mereka juga bisa menggunakan tag HTML seperti ini:
<img src="https://example.com/gambar.jpg" alt="Ilustrasi materi" loading="lazy" />Ini tetap aman dan cocok untuk situasi di mana user ingin kontrol lebih besar atas atribut gambar tanpa harus membangun layout custom.
 di isi materi, lalu gambar akan muncul di halaman pembelajaran dengan cara yang sederhana, cepat, dan aman.Jadi, tidak perlu ragu untuk menambahkan visual pada materi. Gambar membantu siswa lebih cepat memahami konsep, terutama saat materi berisi penjelasan yang lebih teknis atau membutuhkan konteks visual.