# Image Imageは主にフォームの送信や表示の際に使う画像用のコンポーネントです。Dashcombが提供しているImageは、通常のHTMLの `` をベースにして、管理画面の用途に合わせています。 ImageのURLの初期設定はIDE画面にて[データソース](https://github.com/dashcomb/gitbook-doc/blob/master/ide/ui-component/region/data-source/README.md)の値や固定値などをデフォルトか画像URLに埋め込みが可能です。 ImageのURLの変更は利用者画面にて[Input](/dashcomb-help-center/ide/ui-component/input.md)や[Uploader](/dashcomb-help-center/ide/ui-component/uploader.md)などを使って書き込みが可能です。 ## プロパティ Imageコンポーネントには、以下のプロパティが含まれています。
### 共通 #### **オブジェクト** 画像オブジェクトの変数名です。Imageコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `image1`、`image2`... と名付けられます。 ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。 （例）`{{image1.imageUrl}}` で `image1` の値を取得することができます。 利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。 #### 非表示 トグルスイッチをONにすると、インプットが非表示になります。 ### データ #### ラベル文字 画像のラベルテキストです。Image コンポーネントをドラッグ＆ドロップすると、自動的に `Image` と設定されます。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 {% hint style="info" %} `{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。 {% endhint %} **デフォルト** アップロード画像のURLの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は空文字列（""）です。 IDE画面でのみ設定可能となっており、利用者画面では変更できません。 また、**デフォルト**と**画像URL**(後述)を両方設定した場合、画像URLの設定を優先します。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 （例）オブジェクト `image1` のデフォルトに `https://cdn.dashcomb.com/problem_desktop.png` を入力することで、画面初期表示の際に、この画像エリアに予め `Dashcombのproblem_desktop.png` という画像が表示されています。 （例）オブジェクト `image2` のデフォルトに `{{image1.imageUrl}}` を入力することによって、`image1` に入力した内容がリアルタイムで `image2` に反映することができます。 現在の設定値は、`{{オブジェクト名.defaultValue}}` で参照できます。 **画像URL** 画像のURLの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は空文字列（""）です。 IDE画面でのみ設定可能となっており、利用者画面では変更できません。 **デフォルト**と**画像URL**(後述)を両方設定した場合、画像URLの設定を優先します。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 （例）オブジェクト `image1` の画像URLに `https://cdn.dashcomb.com/problem_desktop.png` を入力することで、画面初期表示の際に、この画像エリアに予め `Dashcombのproblem_desktop.png` という画像が表示されています。 （例）オブジェクト `image2` の画像URLに `{{image1.imageUrl}}` を入力することによって、`image1` に入力した内容がリアルタイムで `image2` に反映することができます。 また、Inputコンポーネント・Uploadコンポーネントなどを経由して変更が可能です。 （例）オブジェクト `image1` の画像URLに `{{input1.value}}` を入力し、オブジェクト `input1` の入力欄に `https://cdn.dashcomb.com/problem_desktop.png` を入力することで、`input1` に入力した内容がリアルタイムで `image1` に反映することができます。つまり、`image1` の画像エリアにリアルタイムで `Dashcombのproblem_desktop.png` という画像が表示されています。 （例）オブジェクト `image1` の画像URLに `{{upload1.value}}` を入力し、オブジェクト `upload1` の画像エリアをクリックして画像ファイルを選んでアップロードすることで、`upload1` でアップロードした画像がリアルタイムで `image1` に反映することができます。つまり、`image1` の画像エリアにリアルタイムでアップロードした画像が表示されています。 ### 外観 **高さ** 画像の高さを指定します。初期設定では2行に設定されており、最小設定は1行です。 **画像の形** 表示する画像の形を指定します。四角、丸角四角、丸の中から選択が可能です。 #### **ラベル表示** 画像のラベルテキストの表示・非表示を切り替えます。 トグルスイッチをOFFにすると、画像にラベルが表示されなくなりますが、画像本体に影響はありません。 以下の項目で表示を調整できます。
項目名設定内容
ラベル整列ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。
--- # 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.dashcomb.com/dashcomb-help-center/ide/ui-component/image.md?ask= ``` 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.