コンテンツアセットファイルへのアクセス

範囲設定されたモジュール @salesforce/contentAssetUrl からコンテンツアセットファイルをインポートします。Salesforce ファイルをコンテンツアセットファイルに変換すると、カスタムアプリケーションやエクスペリエンスビルダーテンプレートで使用できるようになります。

1import myContentAsset from "@salesforce/contentAssetUrl/contentAssetReference";

1import myContentAsset from "@salesforce/contentAssetUrl/namespace__contentAssetReference";

myContentAsset — アセットファイルを参照する名前。
contentAssetReference — アセットファイルの名前。

アセットファイル名には、アンダースコアと英数字のみ使用できます。また、アセットファイル名は、組織内で一意にする必要があります。最初は文字であること、空白は使用しない、最後にアンダースコアを使用しない、2 つ続けてアンダースコアを使用しないという制約があります。
namespace — アセットファイルが管理パッケージ内にある場合、この値は管理パッケージの名前空間です。

サンプルコードを見てみましょう。

JavaScript コードは、2 つのコンテンツアセットファイルをインポートします。

1// assetFileExample.js
2import { LightningElement } from "lwc";
3import SALES_WAVE_LOGO from "@salesforce/contentAssetUrl/SalesWaveLogo";
4import PARTNER_LOGOS from "@salesforce/contentAssetUrl/PartnerLogos";
5
6export default class AssetFileExample extends LightningElement {
7  // Expose the asset file URL for use in the template
8  salesWaveLogoUrl = SALES_WAVE_LOGO;
9
10  // Expose URL of assets included inside an archive file
11  goldPartnerLogoUrl = PARTNER_LOGOS + "pathinarchive=images/gold_partner.png";
12}

コンテンツアセットファイルは、ディレクトリ構造がネストされたアーカイブファイルにすることができます。アーカイブ内の項目を参照するには、文字列を連結して項目のパスを作成します。これは、例で goldPartnerLogoUrl を作成するために行った方法と同様です。アーカイブ内のコンテンツアセットファイルのパスを指定するには、pathinarchive パラメータを使用します。

テンプレート内のリソースを参照するには、{property} 構文を使用します。この構文は、JavaScript プロパティを参照するために使用する構文と同じです。

1<!-- assetFileExample.html -->
2<template>
3  <lightning-card title="Asset File Example" icon-name="custom:custom19">
4    <div class="slds-m-around_medium">
5      <img src={salesWaveLogoUrl} />
6      <img src={goldPartnerLogoUrl} />
7    </div>
8  </lightning-card>
9</template>

Salesforce DX プロジェクトの場合、アセットファイルは /force-app/main/default/contentassets ディレクトリにあります。contentassets のサブディレクトリを作成することはできません。アセットファイルを定義する .asset-meta メタデータファイルを作成します。

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。