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:
