# Image

Imageは主にフォームの送信や表示の際に使う画像用のコンポーネントです。Dashcombが提供しているImageは、通常のHTMLの `<img>` をベースにして、管理画面の用途に合わせています。

ImageのURLの初期設定はIDE画面にて[データソース](https://github.com/dashcomb/gitbook-doc/blob/master/ide/ui-component/region/data-source/README.md)の値や固定値などをデフォルトか画像URLに埋め込みが可能です。 ImageのURLの変更は利用者画面にて[Input](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)や[Uploader](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/uploader)などを使って書き込みが可能です。

## プロパティ

Imageコンポーネントには、以下のプロパティが含まれています。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-1b6c66979a2a70e378863ac5162b7b9c028b940c%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8.png?alt=media" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

#### **オブジェクト**

画像オブジェクトの変数名です。Imageコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `image1`、`image2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{image1.imageUrl}}` で `image1` の値を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/inspector-region) で確認できます。

#### 非表示

トグルスイッチをONにすると、インプットが非表示になります。

### データ <a href="#data" id="data"></a>

#### ラベル文字

画像のラベルテキストです。Image コンポーネントをドラッグ＆ドロップすると、自動的に `Image` と設定されます。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% 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` の画像エリアにリアルタイムでアップロードした画像が表示されています。

### 外観 <a href="#appearance" id="appearance"></a>

**高さ**

画像の高さを指定します。初期設定では2行に設定されており、最小設定は1行です。

**画像の形**

表示する画像の形を指定します。四角、丸角四角、丸の中から選択が可能です。

#### **ラベル表示**

画像のラベルテキストの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、画像にラベルが表示されなくなりますが、画像本体に影響はありません。

以下の項目で表示を調整できます。

<table><thead><tr><th width="132">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>ラベル整列</td><td>ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr><tr><td>ラベル位置</td><td>ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。</td><td></td></tr><tr><td>ラベル横幅</td><td>ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。</td><td></td></tr></tbody></table>