Access Static Resources, Content Asset Files in Lightning Web Component

Access Static Resources, Content Asset Files in Lightning Web Component

Last Updated on June 25, 2022 by Rakesh Gupta

Big Idea or Enduring Question:

  • How to import and use static resources in the lightning web component? 

Objectives:

After reading this blog, you’ll be able to:

  • Understand the purpose of the static resource
  • Use static resources in the lightning web component
  • Access content asset file in the lightning web component
  • and much more

In the past written a few articles on Lightning Web Component. Why not check them out while you are at it?! 

  1. Pass lightning-input field Value from a Button Click to Lightning Web Component Controller
  2. Reset lightning-input Field on Button Click in Lightning Web Component
  3. Add Confirmation, Alert, and Prompt Dialog Box to Lightning Web Component

Business Use case

Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). She has uploaded two images in the respective static resources as mentioned below:

  1. Automation_Champion
  2. slds_icons/utility/product_warranty_term_60.png

Now she wants to learn how to import and use them in the lightning web component, Similar to the following screenshot: 

How to Import Static Resources in Lightning Web Component? 

Static resources allow you to upload content you can reference in a Lightning Web Component Lightning Component, including archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files. Static resources can be used only within your Salesforce org, so you can’t host content here for other apps or websites.

To access Static Resources in  Lightning web components first we have to import from @salesforce/resourceUrl to the component’s JavaScript file.

The syntax for importing static resource in Lightning Web Component

import myResource from '@salesforce/resourceUrl/resourceReference';

When static resource has namespace

import myResource from '@salesforce/resourceUrl/namespace__resourceReference';

  • myResource – A name that refers to the static resource.
  • resourceReference – The name of the static resource. A static resource 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 static resource is in a managed package, this value is the namespace of the managed package.

How to Access Content Asset Files in Lightning Web Component? 

To access content asset files in Lightning web components first we have to import from @salesforce/contentAssetUrl to the component’s JavaScript file. Convert a Salesforce file into a content asset file to use the file in custom apps and Experience Builder templates.

The syntax for importing content asset files in Lightning Web Component

import myContentAsset from '@salesforce/contentAssetUrl/contentAssetReference';

When static resource has namespace

import 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.

The JavaScript code imports two content asset files. 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 silverPartnerLogoUrl.

To specify the path to the content asset file in the archive, use thpathinarchive parameter.

// contentAssetFileExample.js
import { LightningElement } from 'lwc';
import COMPANY_LOGO from '@salesforce/contentAssetUrl/SalesWaveLogo';
import PARTNER_LOGOS from '@salesforce/contentAssetUrl/PartnerLogos';

export default class AssetFileExample extends LightningElement {

    // Expose the asset file URL for use in the template
    companyLogoUrl = COMPANY_LOGO;

    // Expose URL of assets included inside an archive file
    silverPartnerLogoUrl = PARTNER_LOGOS + 'pathinarchive=images/silver_partner.png';

}

<!-- contentAssetFileExample.html -->
<template>
    <lightning-card title="Content Asset File Example" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            <img src={companyLogoUrl}>
            <img src={silverPartnerLogoUrl}>
        </div>
    </lightning-card>
</template>

Automation Champion Approach (I-do):

There are 3 steps to solve Rachel’s business requirement using the Lightning Web Component and Static Resource. We must:

  1. Upload Automation Champion Logo as a static resource
  2. Upload SLDS Icons zip folder as a static resource
  3. Import and use static resources in the lightning web component 

1. Upload Automation Champion Logo as a Static Resource

Upload Automation Champion Logo, as a single .png file in the static resource. Select Public in the cache control drop-down list.

2. Upload SLDS Icons Zip Folder as a Static Resource

Download the SLDS Icons Zip folder and then upload it as a zip file in the static resource. Select Public in the cache control drop-down list.

Import and use Static Resources in the Lightning Web Component 

After uploading images in static resource, now we can use it in Lightning Web Component. 

staticResourceExample.js-meta.xml

A lightning web component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point-and-click tools. Make sure to add the right target for it. 

This configuration file makes the component available for all Lightning page types but restricts support on the home page only for desktops. 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

staticResourceExample.html

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

<!-- staticResourceExample.html -->
<template>
    <lightning-card title="Static Resource Example" icon-name="custom:custom36">
        <div class="slds-m-around_medium">
            <img src={automationChampionLogoUrl}>
            <img src={productWarrantyTermUrl}>
        </div>
    </lightning-card>
</template>

staticResourceExample.js

The JavaScript code imports two resources: Automation Champion logo and an image of a Product Warranty Term icon.

// staticResourceExample.js
import { LightningElement } from 'lwc';
import AUTOMATION_CHMAPION_LOGO from '@salesforce/resourceUrl/Automation_Champion';
import PRODUCT_WARRANTY_ICON from '@salesforce/resourceUrl/slds_icons';

export default class staticResourceExample extends LightningElement {

    // Expose the static resource URL for use in the template
    automationChampionLogoUrl = AUTOMATION_CHMAPION_LOGO;

    // Expose URL of product warranty term icon included inside an archive file
    productWarrantyTermUrl = PRODUCT_WARRANTY_ICON + '/utility/product_warranty_term_60.png';

}

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.

Have feedback, suggestions for posts, or need more information about Salesforce online training offered by me? Say hello, and leave a message!

3 thoughts on “Access Static Resources, Content Asset Files in Lightning Web Component

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.