> For the complete documentation index, see [llms.txt](https://docs.qore.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.qore.dev/faq/how-to-display-image-in-qore-app/gallery-component.md).

# Gallery Component

Dengan component gallery ini kita dapat menampilkan kumpulan gambar yang otomatis berubah-ubah sesuai dengan source data yang kita setup. Biasanya component ini berguna untuk menampilkan promo, event , ataupun highlight informasi lainnya agar ketika user membuka apps dapat langsung melihat informasi tersebut.\
\
Ikuti step step cara menampilkan gambar menggunakan gallery component 

1\. Setup kumpulan gambar di table Qore.\
Pada step pertama ini kita akan membuat tabel baru yang berisi informasi nama (type: text) dan file (type:file).

![](/files/a1rVSMAztwv7BXl1IbFi)

2\. Setelah berhasil di step 1, selanjutnya kita akan mulai menambahkan component gallery di editor aplikasi. Kita awali dengan mengakses app editor terlebih dahulu, kemudian ikuti simple step berikut

* Go to app builder, dari menu table klik menu apps kemudian pilih salah satu apps yang ingin kita edit.\
  ![](/files/rxc7CdFyq3oBYd9YfXQI)
* Pilih atau tambahkan halaman yang ingin kita tambahkan gambar \
  ![](/files/MNfxAixXtHvFVR4CrdCd)
* Tambahkan component gallery pada category media\
  ![](/files/AcvmqkLC6zx6cM1SXhEC)
* Aktifkan component gallery untuk mulai mengatur data \
  ![](/files/AVfCz0FHlUy728Nt2SnI)

3\. Kemudian kita dapat sesuaikan source table yang berisi data gambar yang ingin kita tampilkan di aplikasi. Source akan berisi list table yang ada.

![](/files/AfnbvuTQegxHHWu6aKL1)

4\. Lalu pilih kolom dari table/view source yang menyimpan informasi gambar dengan mengetikkan @namakolom.

![](/files/pSqPTq9K1Kv0Geno3fZX)

5\. Jika berhasil maka akan muncul gambar di emulator screen sesuai dengan data di table promo yang sebelumnya telah ditambahkan.

![](/files/CKt0i5hsPKCGgOLRnLN0)