YouTube ChannelSchedule a CallSubscribe for Updates

画像

イメージコンポーネントは、Avonni Dynamic Components 内で画像を表示できるようにします。さまざまなソースの画像を使用でき、サイズや位置を制御し、インタラクティブな拡大機能を追加することもできます。

概要

Image コンポーネントは以下のための基本的な視覚要素です：

-   静的画像の表示（例：ロゴ、製品写真）。
-   Salesforce のデータに基づく動的画像の表示（例：連絡先のプロフィール写真の表示）。
-   視覚的に豊かなユーザーインターフェースの作成。

使用例

  • レコード詳細ページ：レコードに関連する製品画像、ユーザーのプロフィール写真、会社のロゴ、その他の関連画像を表示します。

  • ダッシュボード：視覚的なコンテキストやブランディングを提供するためにダッシュボードに画像を含めます。

  • カタログ：視覚的に魅力的な製品カタログを作成します。

  • 画像ギャラリー：一連の画像を表示します（ただし、カルーセルのような専門のコンポーネントの方が適している場合があります）。

  • マーケティングコンテンツ：コンポーネントをより魅力的にするために画像を含めます。

Image コンポーネントの構成

キャンバス上で Image コンポーネントを選択すると、プロパティパネルでそのプロパティにアクセスできます。

基本プロパティ

  • API 名： （テキスト）このコンポーネントインスタンスの一意の識別子（例： ProductImage, UserProfilePicture).

  • 画像ソース： （テキスト - 重要）このプロパティは決定します 画像の起源。リソースセレクタアイコンで選択できるいくつかのオプションがあります：

    • 静的 URL： ホストされている画像の 完全な URL を入力します（例： https://www.example.com/myimage.jpg). 重要： 画像は公開されているか、共有設定に基づいて Salesforce ユーザーがアクセスできる必要があります。

    • リソース： 次を選択 静的リソース （Salesforce 組織内）。これはアプリケーションのデザインに画像を含める推奨方法です。画像を Salesforce のセットアップで静的リソースとしてアップロードする必要があります 前に ここで選択できます。

    • 変数/数式： URL 文字列を 返すテキスト変数または数式リソースを使用します。これにより、データやユーザー操作に基づいて動的に画像を変更できます。例：データテーブルで選択された製品に基づいて異なる製品画像を表示する。

    • コンポーネント属性： 別のコンポーネントの属性から URL を動的に取得します。

  • 代替テキスト（alt）： （テキスト - アクセシビリティに必須）画像の短く記述的な代替テキストを提供します。スクリーンリーダーは視覚障害のあるユーザーのためにこのテキストを使用し、画像の読み込みに失敗した場合にも表示されます。 常に意味のある alt テキストを提供してください。

サイズと位置

  • 幅： （テキスト/数値）画像の幅を制御します。ベストプラクティス：次のいずれかを設定してください いずれか 幅 や 高さ、通常は両方同時には設定せず、歪みを避けます。オプション：

    • 数値＋ px: ピクセル単位で幅を指定します（例： 100px, 250px).

    • 数値＋ %: コンテナ要素の幅の割合として幅を指定します（例： 含む要素の 幅（例： 50%, 100%).

    • auto: 画像の固有幅が使用されます。

    • 空白： 他の設定に基づいてブラウザに最適なフィットを決定させます。

  • 高さ： （テキスト/数値）画像の高さを制御します。ベストプラクティス：次を設定してください いずれか 幅 や 高さ、通常は両方同時には設定せず、歪みを避けます。オプション：

    • 数値＋ px: ピクセル単位で高さを指定します。

    • 数値＋ %: 高さを割合で指定します（ 含む要素の 高さの

    • auto: 場合）。

    • 空白： 他の設定に基づいてブラウザに最適なフィットを決定させます。

  • 画像の固有高さが使用されます。 トリミングフィット： 幅 値を参照するフィルターを追加します： （テキスト - オプションから選択）指定された内に収まるように画像がどのようにリサイズまたはトリミングされるかを決定します 高さ

    • （設定されている場合）。これはアスペクト比がコンポーネントの寸法と一致しない場合に画像の挙動を制御するために重要です。cover ：画像はコンポーネント領域を完全に覆うようにスケールされ、アスペクト比を維持します 。アスペクト比が一致しない場合、画像の一部が トリミングされる

    • ことがあります。これは背景画像にとってしばしば最良の選択です。contain ：画像は完全に収まるようにスケールされ、 コンポーネント領域内に収まります、 ：画像はコンポーネント領域を完全に覆うようにスケールされ、。アスペクト比が一致しない場合、画像の周りに 空白部分 が生じることがあります。トリミングせずに画像を表示する場合に最適です。

    • fill：画像は 伸縮されて 最小（Min） 正確に埋めます コンポーネント領域内に収まります、 （アスペクト比を 維持せずに）。これにより 歪みが発生する可能性があります。伸縮された効果が意図的でない限り避けてください。

    • none：画像はその 元のサイズで表示されます。コンポーネント領域より大きい場合は 切り取られます.

  • トリミングサイズ： （テキスト - オプションから選択）：トリミング領域のサイズを決定します。

    • を設定し、

    • 小

    • 中

    • 大

    • x-large

    • 2x-large

    • 3x-large

    • 4x-large

  • トリミング位置 X： （テキスト - オプションから選択）トリミングを水平方向に移動します。

    • 左

    • 中央

    • 右

  • トリミング位置 Y： （テキスト - オプションから選択）トリミングを垂直方向に移動します。

    • 上

    • 中央

    • 下

  • 位置： （テキスト - オプションから選択）画像がコンポーネント領域全体を埋めない場合の位置決め方法を決定します。オプションには通常次が含まれます：

    • static

    • relative

    • absolute

    • fixed

動作

  • 拡大鏡タイプ： （テキスト - オプションから選択）拡大表示を追加します。

    • なし （デフォルト）

    • 標準

    • 追従

  • 表示： （ブール）Image コンポーネントがページ上で表示されるかどうかを制御します。動的な表示にはブール変数または数式にバインドしてください。

  • 無効 （ブール - チェックボックス）：true に設定するとコンポーネントを無効にします

：最大値。

例 1：URL からの静的画像

-   画像ソース：  `https://www.example.com/logo.png`
-   幅：  `200px`
-   高さ：  `auto`
-   トリミングフィット：  `contain`
-   ソース：  会社のロゴ

これは URL から画像を表示し、幅を 200 ピクセルに固定し、アスペクト比を維持するために高さを自動調整します。

例 2：レコードからの動的画像（アカウントのレコードページ上）

-   画像ソース：  `$Component.record.PhotoUrl`  （これは Account オブジェクトに画像 URL を含む `PhotoUrl` というフィールドがあることを前提としています）
-   幅：`100%`
-   高さ：`auto`
-   トリミングフィット：`cover`
-   ソース：  アカウント写真

もし 対象オブジェクトページ が設定されている場合 Account、あなたは 画像ソース 最小（Min） $Component.record.PhotoUrl をバインドして現在のアカウントの写真を表示できます。設定して 幅 最小（Min） 100% を空白のままにすると（または （テキスト - オプションから選択）指定された内に収まるように画像がどのようにリサイズまたはトリミングされるかを決定します ）アスペクト比が保持され、 autoトリミングフィット：cover は画像が利用可能なスペースを埋めることを保証し、場合によってはトリミングされます。 例 3：変数から画像を表示する。

imageUrl という名前の変数を作成します。

  1. imageUrl テキスト型にします。 タイプはテキストです。

  2. 「ロード時」インタラクションを追加して、変数の値に静的な画像 URL を設定します。

  3. 画像コンポーネントを追加します。

  4. データに応じて 画像ソース 変数の値に @imageUrl

  5. 変数が更新され、それらの値を使用してデータテーブルをフィルタリングできます。

    • 画像の URL：URL を使用する場合は、それらが有効でユーザーがアクセスできることを確認してください。

    • 静的リソース：アプリケーションのデザインの一部である画像については、パフォーマンスとセキュリティの観点から静的リソースの使用が一般的に推奨されます。

    • アスペクト比：画像のアスペクト比と 幅, （テキスト - オプションから選択）指定された内に収まるように画像がどのようにリサイズまたはトリミングされるかを決定します、および トリミングフィット プロパティの設定方法に注意して、歪みを避けてください。

    • アクセシビリティ： 値のバインディング： Source プロパティに意味のある代替テキストを提供してください。 Source プロパティに。

    • 動的画像：変数や数式にバインドする能力を活用して動的な画像表示を作成します。 画像ソース 変数や数式に

まとめると

バインドする能力を活用します。

最終更新

役に立ちましたか？