Access Content Asset Files

Import content asset files from the @salesforce/contentAssetUrl scoped module. Convert a Salesforce file into a content asset file to use the file in custom apps and Experience Builder templates.

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

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

myContentAsset—A name that refers to the asset file.
contentAssetReference—The name of the asset file.

An asset file name can contain only underscores and alphanumeric characters, and must be unique in your org. It must begin with a letter, not include spaces, not end with an underscore, and not contain two consecutive underscores.
namespace—If the asset file is in a managed package, this value is the namespace of the managed package.

Let’s look at some sample code.

The JavaScript code imports two content asset files.

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}

A content asset file can be an archive file with a nested directory structure. To reference an item in an archive, concatenate a string to create the path to the item, as the example does to build goldPartnerLogoUrl. To specify the path to the content asset file in the archive, use the pathinarchive parameter.

To reference a resource in a template, use {property} syntax, which is the same syntax you use to reference any JavaScript property.

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>

In a Salesforce DX project, asset files live in the /force-app/main/default/contentassets directory. You can’t create subdirectories of contentassets. Create an .asset-meta metadata file that defines the asset file.

The lwc-recipes repo has a miscContentAsset component that demonstrates asset file usage.

Tip

See Also