> 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/component/media/image.md).

# Image

Cara menambahkan Image component

Berikut langkah-langkah untuk menambahkan image *component*

* Buka Qore App Editor 

* Pada tab library, di section media pilih image *component*. Terdapat 2 cara untuk menambahkan *component* ke dalam emulator 

  * Jika ingin menambahkan *component* langsung ke suatu page, kamu dapat *double-click card* tersebut
  * Jika ingin menambahkan *component* ke dalam salah satu kontainer di page tersebut, kamu dapat *drag and drop* ke dalam kontainer yang diinginkan

  <figure><img src="/files/Yqm0JitAUk9mpg7Gj6df" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka image *component* akan muncul di *emulator editor screen* seperti berikut&#x20;

<figure><img src="/files/lHUiUSfPLItNRnNySmXu" alt=""><figcaption></figcaption></figure>

Properties dari image component adalah&#x20;

Source :

* All Device : jika gambar ingin ditampilkan di semua tipe device dengan sumber gambar yang sama, maka aktifkan toggle
* Source : sumber gambar, dapat berupa link gambar ataupun baris dalam qore data

Design

* Preview : jika toggle diaktifkan, maka pengguna dapat mengetuk gambar untuk melihat gambar dalam layar penuh

Phone :

* Source : sumber gambar yang ditampilkan jika device adalah phone, dapat berupa link gambar ataupun baris dalam qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah phone, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device phone, apakah fill ataupun fit&#x20;

Tablet :

* Source : sumber gambar yang ditampilkan jika device adalah tablet, dapat berupa link gambar ataupun baris dalam qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah tablet, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device tablet, apakah fill ataupun fit

Dekstop :

* Source : sumber gambar yang ditampilkan jika device adalah dekstop, dapat berupa link gambar ataupun baris dalam qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah dekstop, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device dekstop, apakah fill ataupun fit

Berikut contoh image yang telah dimodifikasi

<figure><img src="/files/29xdh2yTmKaB8IAtGrd0" alt=""><figcaption></figcaption></figure>