How to use Static Resources in LWC

Learn how to use Static Resources in Lightning Web Components — including images, CSS files, custom fonts, and JavaScript libraries.

1. Introduction

Static resources in Salesforce are files that you can upload and use in your Lightning Web Components (LWC). These can include images, CSS files, JavaScript libraries, fonts, etc., which are uploaded to Salesforce and served from the platform. This is a useful feature because it allows for reusability and centralizes resources.

In this post, we will explore how to use static resources in LWC to enhance your components:
• 1. Use an Image from Static Resource in LWC.
• 2. Use a CSS File from Static Resource.
• 3. Use Custom Fonts from Static Resources.
• 4. Use a JS Library from Static Resources.

2. Use an Image from Static Resource

Before you can use any static resources in LWC, you need to upload them to Salesforce first.

Step 1: Upload Image into Static Resource
• Navigate to Setup in Salesforce.
• In the Quick Find box, type "Static Resources".
• Click New to upload a new static resource.
• Provide a Name for the resource (e.g., myImage, myLibrary).
• Select the Cache Control setting (e.g., Public or Private).
• Public is recommended for resources that do not change often, such as images or libraries.
• Upload your file (e.g., an image, a JS library, or a CSS file).
• After uploading, click Save.

Step 2: Reference the Static Resource in LWC
To use a static resource in your LWC, you need to import it using Salesforce's @salesforce/resourceUrl module. 

import { LightningElement } from 'lwc';
import myImage from '@salesforce/resourceUrl/salesforceLogo';

export default class StaticResourceCmp extends LightningElement {
    imageUrl = myImage;  // Assign the imported static resource URL to a property
}
<template>
    <lightning-card title="Static Resource Example" icon-name="custom:custom19">
        <img src={imageUrl}>
    </lightning-card>
</template>

• import myImage from '@salesforce/resourceUrl/salesforceLogo' — imports the static resource URL.
• imageUrl = myImage — assigns the URL to a property so it can be used in the template.
• src={imageUrl} — binds the image URL to the img tag in the HTML template.

3. Use a CSS File from Static Resource

Upload the Custom CSS file into Static Resources first (as shown in Step 1 above), then load it in your component using loadStyle from lightning/platformResourceLoader.

HTML Template:

<template>
    <lightning-card title="Static Resource Example" icon-name="custom:custom19">
        <!-- Image from Static Resource -->
        <img src={imageUrl} class="small">

        <!-- Custom CSS styles from Static Resource -->
        <div class="container">
            <h1 class="title">Hello, LWC with Custom Styles</h1>
            <lightning-button class="myButton" label="Click Me"></lightning-button>
        </div>
    </lightning-card>
</template>

JavaScript Controller:

import { LightningElement } from 'lwc';
import salesforceLogo from '@salesforce/resourceUrl/salesforceLogo';
import { loadStyle } from 'lightning/platformResourceLoader';
import MY_CUSTOM_STYLES from '@salesforce/resourceUrl/myCustomStyles';

export default class StaticResourceCmp extends LightningElement {
    imageUrl = salesforceLogo;

    connectedCallback() {
        loadStyle(this, MY_CUSTOM_STYLES)
            .then(() => {
                console.log('Custom CSS loaded successfully');
            })
            .catch(error => {
                console.error('Error loading custom CSS:', error);
            });
    }
}

myCustomStyles.css (uploaded as Static Resource):

.container {
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 5px;
    text-align: center;
}

.title {
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.my-button {
    background-color: #0070d2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.my-button:hover {
    background-color: #0056a0;
}

The loadStyle method ensures that the CSS is applied globally to the component. This method is asynchronous and returns a promise. If the CSS is loaded successfully, it logs a success message; otherwise, it catches any errors.

4. Use Custom Fonts from Static Resource

Upload your font file (e.g., Pompiere.ttf) to Static Resources. Then in your LWC component's CSS file, use the @font-face rule to define and apply the font. 

@font-face {
    font-family: 'Pompiere';
    src: url('/resource/Pompiere.ttf') format('truetype');
}

.customFont {
    font-family: 'Pompiere';
}

HTML Template — applying the custom font:

<template>
    <lightning-card title="Static Resource Example" icon-name="custom:custom19">
        <!-- Image from Static Resource -->
        <img src={imageUrl} class="small">

        <!-- Custom CSS styles from Static Resource -->
        <div class="container">
            <h1 class="title">Hello, LWC with Custom Styles</h1>
            <lightning-button class="myButton" label="Click Me"></lightning-button>
        </div>

        <!-- Custom Font 'Pompiere' from Static Resource -->
        <div class="customFont">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </lightning-card>
</template>

In the output, the first paragraph will have the custom Pompiere font applied, while the second paragraph will use the default font styles — clearly demonstrating the difference.

5. Use a JS Library from Static Resources

You can also load JavaScript libraries (e.g., jsPDF, Chart.js, Moment.js) from Static Resources using loadScript from lightning/platformResourceLoader. 

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import JSPDF from '@salesforce/resourceUrl/jspdf';

export default class PdfGenerator extends LightningElement {

    connectedCallback() {
        loadScript(this, JSPDF)
            .then(() => {
                console.log('jsPDF library loaded successfully');
            })
            .catch(error => {
                console.error('Error loading jsPDF:', error);
            });
    }
}

• loadScript(this, JSPDF) — loads the JS library from Static Resources asynchronously.
• Use loadStyle for CSS files and loadScript for JavaScript libraries.
• Both methods return a Promise — always handle .then() and .catch().
• For a full example of using the jsPDF library, check the Generating PDFs with jsPDF library post.

6. Key Points to Remember

• Always upload files to Static Resources in Salesforce Setup before referencing them in LWC.
• Use @salesforce/resourceUrl/resourceName to import static resource URLs.
• Use loadStyle from lightning/platformResourceLoader to load CSS files.
• Use loadScript from lightning/platformResourceLoader to load JS libraries.
• Set Cache Control to Public for resources that don't change often (images, libraries).
• Both loadStyle and loadScript are asynchronous — always use .then() and .catch().
• Use @font-face in your component CSS file to apply custom fonts from Static Resources.

Popular posts from this blog

Handling Errors in LWC

Image
Handling Errors in LWC Understand the key techniques for handling errors and exceptions in LWC — and know exactly when and how to apply each approach. 1. Introduction Error handling is essential in Lightning Web Components (LWC) because it bridges the gap between failures on the server (Apex, permissions, data issues) and a graceful experience for the user on the client side. In LWC, errors can originate from multiple sources: • Apex method failures — data issues, governor limits, incorrect permissions. • JavaScript runtime errors — unexpected null values, bad logic. • UI validation — invalid form input before submission. LWC gives you several tools to handle all of these: • @wire error handling — for declarative Apex calls. • .then() / .catch() — for imperative Apex calls. • try-catch blocks — for async/await patterns. • Client-side validation — for UI form checks. 2. Handling Errors in @wi...
Read more

Hello World using LWC

Image
1. Create Lightning Web Component 1️⃣ In VS Code, open the Command Palette by pressing Ctrl + Shift + P on Windows. 2️⃣ Type SFDX and select SFDX: Create Lightning Web Component . 3️⃣ Type helloWorldCMP as the name of the new component and press Enter. 4️⃣ Press Enter again to accept the default directory path: force-app/main/default/lwc . 2. helloWorldCMP.html Add the following code into the HTML file: <template> <lightning-card title="First LWC" icon-name="custom:custom14"> <p>Hello World!!</p> <p>Welcome {name}..</p> </lightning-card> </template> 1. <template> : Root element of an LWC component’s HTML template. 2. <lightning-card> : Lightning Base Component providing a styled card interface. 3. <p>Hello World!!</p> : Displays “Hello World!!” inside the card. 4. <p>Welcome {name}..</p> : ...
Read more

Lightning Card in LWC

Image
Lightning Card in LWC Learn how to use lightning-card in Lightning Web Components (LWC) to create structured, visually appealing containers for your Salesforce UI. 1. Introduction lightning-card is a UI component that provides a container for displaying content in a card format. It’s part of the Salesforce Lightning Design System (SLDS) and enhances the visual presentation of components while maintaining consistency with the Salesforce UI. Key Features of lightning-card: • Title: Displays a title for the card. • Body: Contains the main content of the card. • Actions: Optional slot for adding buttons or interactive elements. • Footer: Optional section for additional information or links. • Icon: Can include an icon in the header. 2. Basic Lightning Card The simplest form of a Lightning Card provides a clean layout for displaying information. <lightning-card title="Basic Card"> <...
Read more