# Tableに画像を表示

Dashcombが提供している[Table](https://github.com/dashcomb/gitbook-doc/blob/master/ide/ui-component-table.md)コンポーネントは画像URLを解析し、指定されたサイズや位置で画像を表示することが可能です。

## 準備

* これから使うデータソースに画像URLのコラムを入れておきます。
  * データソースに格納しているのは画像ファイルではなく、画像URLの文字列です。
* データソースのデータをTableコンポーネントに表示させてます。（画像URLの初期表示は文字列です）
  * 詳細は[Table](/dashcomb-help-center/ide/ui-component/table.md)にご参考ください。

## 実現

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

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

* 表示先の[Table](/dashcomb-help-center/ide/ui-component/table.md)コンポーネントをクリックして、右側の\[プロパティ領域]に(../ide/region/property-region.md)「コラム」項目を表示させます。
* 表示元の画像フィールドをクリックすると、[コラムエディタ](/dashcomb-help-center/ide/property-region/column-editor.md)が開かれます。
* 「データ種別」項目から「リンク」を選びます。
* 「リンク種別」項目から「画像」を選びます。
* 画像の「高さ」や「整列」などを設定します。
* 「新しいタブで開く」かどうかを設定します。
* 「保存」ボタンをクリックすると、[Table](/dashcomb-help-center/ide/ui-component/table.md)にある画像のURLは画像に変身します。

## 参照項目

* [コラムエディタ](/dashcomb-help-center/ide/property-region/column-editor.md)
* [Tableの使い方](/dashcomb-help-center/ide/ui-component/table.md)


---

# 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/tips-and-tricks/display-image-in-table.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.