How to Use Static Resource In LWC(Lightning Web Component)

Static Resources. Static resources allow you to upload content that you can reference in a Visualforce page, including archives (such as . zip and . jar files), images, style sheets, JavaScript, and other files

Go to Setup -> Static resource -> Create New


staticResourceLWCExample

<template>

<lightning-card title="Static Resource in LWC" icon-name="custom:custom19">

   <div class="slds-m-around_medium">

          <img src={spring20Logo}>

           <img src={summer20Logo}>

       </div>

    </lightning-card>

</template>




staticResourceLWCExample

1 2 3 4 5 6

import { LightningElement } from 'lwc'; import My_Resource from '@salesforce/resourceUrl/MyResourceForLWC'; export default class StaticResourceLWCExample extends LightningElement {     spring20Logo = My_Resource + '/images/salesforce-spring-2020.jpg';     summer20Logo = My_Resource + '/images/salesfoce-summer-2020.jpeg'; }

staticResourceLWCExample

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/

2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle

Please folow the below step to test your LWC conmponent:-

Now we can add this lwc component on home page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your staticResourceLWCExample component and drag it on right hand side top.
• Click Save and activate.