# 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="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2F1oVzsnuGWnYeUfQmitko%2Fmed2.png?alt=media&#x26;token=7f7d8815-0c61-49d0-8b42-d098804334fa" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2Fm0LLsV3rU99QG9xNlpV3%2Fmed22.png?alt=media&#x26;token=bf7d9cba-1241-438d-99fa-83ba59de8e1e" 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="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FXtLnwZCeg8ETeyEzMCon%2Fmed222.png?alt=media&#x26;token=b67b7771-84ae-4026-8e22-8378e8935f90" alt=""><figcaption></figcaption></figure>