> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/display-image-in-table.md).

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