Use Static Resource in LWC (Lightning Web Component)

In this implementation, we will implement the functionality to import and use static Resources in LWC (Lightning Web Component). Let’s just hop into the implementation.

Implementation

In this implementation, we will use <lightning:carouselImage> to display the list of images from Static Resource.

Use Static Resource in LWC (Lightning Web Component)
Use Static Resource in LWC (Lightning Web Component)

First, create a Static Resource and upload a zipped folder with some images.

  • Type Static in the Quick Find box and click on Static Resources.
  • Click on New button and enter a Name. Choose File and click Save.

It should look something like below:

Static Resource in Salesforce
Static Resource in Salesforce

Then, create a Lightning Web Component and add a markup to display images using <lightning:carouselImage>. In the src attribute of <lightning:carouselImage>, we can provide the URL of image or reference of Static Resource.

showImage.html

<template>
    <lightning-card title="Use Static Resource in Lightning Web Component">
        <div class="slds-p-horizontal_small">
            <lightning-carousel>
                <lightning-carousel-image
                    src={image1}
                    header="First Image">
                </lightning-carousel-image>
                <lightning-carousel-image
                    src={image2}
                    header="Second Image">
                </lightning-carousel-image>
                <lightning-carousel-image
                    src={image3}
                    header = "Third Image">
                </lightning-carousel-image>
            </lightning-carousel>
        </div>
    </lightning-card>
</template>

Use Static Resource in LWC

To use Static Resource in LWC (Lightning Web Component), we first need to import it from the @salesforce/resourceUrl/ scoped module.

import Salesforce_Images from '@salesforce/resourceUrl/SalesforceImages';

Then, we can use Salesforce_Images to refer to the static resource. We can also use the relative path to refer folder and files in Static Resource.

showImage.js

import { LightningElement } from 'lwc';
import Salesforce_Images from '@salesforce/resourceUrl/SalesforceImages';
export default class ShowImage extends LightningElement {
    image1 = Salesforce_Images + '/images/image1.jpg';
    image2 = Salesforce_Images + '/images/image2.jpg';
    image3 = Salesforce_Images + '/images/image3.jpg';
}

Then, use properties image1, image2 and image2 in the src attribute of <lightning:carouselImage>.

That is all. This is how we can import and use static Resources in LWC (Lightning Web Component). If you want to know more about it, you can check official Salesforce documentation here.

If you don’t want to miss new implementations, please Subscribe here.

If you want to check more implementation using Lightning Web Components, you can check it here.

See you in the next implementation!

Leave a Comment