Access the static resource images in Lightning Web Component salesforce - Salesforce Globe For You

Solution: In order to access the static resource image in lightning component, import the static resource file using '@salesforce/resourceUrl/staticresourcename' and then refer it in the code.

Example:

Created a static resource zip file of 3 images as shown in image below

LWC Component:

displayStaticResourceImagesInLWC.html

<template>

    <lightning-card title="Show Images from Static Resource">

        <template for:each={imagesToDisplay} for:item="img" >

            <div key={img.image}>

                <img src={img.image}  width="150" height="75"/>

            </div> <br key={img.image}/>

        </template>

    </lightning-card>

</template>

displayStaticResourceImagesInLWC.js

import { LightningElement,api } from 'lwc';

import ImagesZip from '@salesforce/resourceUrl/memorypics';

export default class DisplayStaticResourceImagesInLWC extends LightningElement {

    @api imagesToDisplay =[

        {

            image :`${ImagesZip}/images/image1.jpg`

        },

        {

            image :`${ImagesZip}/images/image2.jpg`

        },

        {

            image :`${ImagesZip}/images/image3.jpg`

        }

    ]

}

displayStaticResourceImagesInLWC.js-meta.xml

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

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>55.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: