Static Resource Image is not displaying in LWC

Question

I'm unable to display the static resource Images in HTML by using LWC. Below is the file. Please guide me to fix this issue.

HTML

<lightning-card> <img src={profilePic}/> </lightning-card> 

JS File

  import { LightningElement,track } from 'lwc';
    import staticResourceImage from  '@salesforce/resourceUrl/Static_Images';
    export default class MyComponent extends LightningElement {
        profilePic = staticResourceImage+'/avatar.png' ;
    }

Static Resource: Static Resource Created

Static Resource Images

Image Error

Thanks in Advance,

Answer 1

remove /avatar.png update code as profilePic = staticResourceImage;