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

import myResource 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>