Skip to main content

画像の使い方

画像を表示する​

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

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

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

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

  1. [データフローリスト] の [新規作成] をクリックする。
  2. [S3] などのストレージを選択する。
  3. [Action] でList objectsを選択する。
  4. [Bucket]に使用するBucket名を入力する。
  5. [実行する]をクリックし、実行する。
  6. [状態管理]を開き、[dataflow1] のdataのContentsの中にデータが入っていることを確認する。
  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と画像が表示されていることを確認する。