Access Static Resources in LWC
Import static resources from the @salesforce/resourceUrl scoped module. Static resources can be
archives (such as .zip and .jar files), images, style sheets, JavaScript, and
other files.
import myResource from '@salesforce/resourceUrl/resourceReference';
importmyResource
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.
Let’s look at some sample code.
Explanation
- Created static resource named 'Testphoto' .
- Referred static resource in Javascript : @salesforce/resourceUrl/Testphoto
html
<template>
<lightning-card title="My image" icon-name="custom:custom19">
<div class="slds-m-around_medium">
<img src={dispPhoto}>
</div>
</lightning-card>
</template>
Javascript
import { LightningElement } from 'lwc';
import Testphoto from '@salesforce/resourceUrl/Testphoto'
export default class StaticResourceAccess extends LightningElement {
dispPhoto = Testphoto;
}
xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Thanks for sharing your valuable information
ReplyDeleteCPQ Salesforce Training
Salesforce CPQ Course