How to load image in LWC component ?

 1. First Load your image in Static Resource. Say name - Financial_ComingSoon 

 2. Import @salesforce/resourceUrl

here is the syntax 

import Financial_ComingSoon from '@salesforce/resourceUrl/Financial_ComingSoon';

3. Declare a variable in export function

financeLogoUrl = Financial_ComingSoon;

4. Refer financeLogoUrl in component. StaticResourceImageLWCExample

<template>

    <lightning-card title="My Banking and Financial ">

        <div class="slds-m-around_medium">

            <img src={financeLogoUrl}>

           

        </div>

</template>

Here is controller code

import { LightningElement } from 'lwc';

import Financial_ComingSoon from '@salesforce/resourceUrl/Financial_ComingSoon';

export default class StaticResourceImageLWCExample extends LightningElement {

    financeLogoUrl = Financial_ComingSoon;

}




Component XML

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

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

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>