画像を表示する

フォームには、以下の画像を表示できます。

• ローカル画像ファイル
• オンライン画像
• Base64 エンコード画像

チュートリアル

動的画像ファイル

画像を動的にレンダリングするには、以下の手順を実行します。

1. [フォーム フィールド コレクション] (Studio) に変数として画像ファイルのパスを設定し、適切な名前 (例: img) を付けます。
2. [HTML 要素] コンポーネントの [表示] タブに移動します (フォーム デザイナー)。
3. [コンテンツ] フィールドに <img href={{data.img}} /> を追加します。

画像を変数として含む完全な HTML タグを設定できます。その場合、[コンテンツ] フィールドでは、{{data.img}} のみを使用してデータをバインドします。

[コンテンツ] フィールドの [変更時に更新] をオンにします。

Base64 エンコード画像

Base64 形式に変換した画像をアップロードするには、以下の手順を実行します。

1. Base64 文字列を変数に格納します (例: img)。

2. HTML 要素コンポーネントの [コンテンツ] フィールドに、以下のスニペットを入力します。

   <img href="data:image/png;base64,{{data.img}}"  />

   注: この方法により、画像を動的に変更できます。

ローカル画像ファイル

ローカル画像ファイルをフォームにアップロードするには、以下の手順を実行します。

1. コンテンツ フォーム コンポーネントを使用します。
2. [画像を挿入] をクリックします使用する画像ファイルを参照するように求められます。

HTML 要素コンポーネントを使用するローカル画像ファイル

HTML 要素コンポーネントを使用してローカル画像ファイルを表示するには、以下の手順を実行します。

1. HTML 要素コンポーネントをフォームにドラッグ アンド ドロップします。
2. [表示] タブの [コンテンツ] フィールドに、<img href="/file://path-to-file" /> を入力します。path-to-file は、表示するファイルのローカル パスです。

たとえば、C:\Folder\image.jpg にある画像ファイルを表示するには、以下のスニペットを入力します。

<img href="/file://c:\folder\image.jpg" />