Skip to main content

画像の使い方

画像を表示する

[URL] に表示する画像のURLを入力します。
固定値もしくは動的な値を入力します。

AWS S3を使って画像に動的な値を適用する

tableで選択されたファイルの画像を表示する

テーブルにファイルのリストを表示する

  1. [データフローリスト][新規作成] をクリックする。
  2. [S3] などのストレージを選択する。
  3. [オプションの入力] を開き、[Action]List objectsを選択する。
  4. [Bucket]に使用するBucket名を入力する。
  5. [実行する]をクリックし、実行する。
  6. [状態管理]を開き、[dataflow1]dataContentsの中にデータが入っていることを確認する。
  7. [テーブル] を配置する。
  8. [エディター][データ]{{ dataflow1.data.Contents }}と入力する。

画像を表示する

  1. [状態管理][UIエレメント] を開き、[table1][selectedRow][data] の中にKeyが入っていることを確認する。
  2. [カラム] を配置して、左側に先程配置した [テーブル] を配置する。
  3. [カラム] の右側に [テキスト][画像] を配置し、 [カラム] の幅を調節する。
  4. 配置した [テキスト] をクリックして、[エディター][テキスト]
    {{ table1.selectedRow.data.Key }}
    と入力する。
  5. 配置した [画像] をクリックして、[エディター][URL]
    {{ "https://[バケット名].s3.[リージョン].amazonaws.com/" + table1.selectedRow.data.Key }}
    ex. {{ "https://aktky-bucket.s3.us-east-2.amazonaws.com/" + table1.selectedRow.data.Key }}
    などと入力する。
  6. [テーブル] で選択したファイルのKeyと画像が表示されていることを確認する。