# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.qore.dev/component/media/image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.