Last Updated on July 7, 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:

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';

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

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

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