How to use Image in Lightning Components

sometimes, we need to use some logo or some kind of image type data we need to use in our lightning web component. Here the way to use Image in LWC.

image-in-lwc

Images in LWC

Step: 1

First, we need to import our image file to Static resource.

import-static-resource

Step: 2

Import our static resource image to our lightning web component.

import SF_LOGO from '@salesforce/resourceUrl/SalesforceLogo';

Step:3

Using imported image to lightning web component's html page to show it in UI.

<img title="salesforce" src={salesforceLogo}/>

full code for show images in lwc is here.

ImageInLWC.html

<template>
    <img title="salesforce" src={salesforceLogo}/>
</template>

ImageInLWC.js

import { LightningElement } from 'lwc';
import SF_LOGO from '@salesforce/resourceUrl/SalesforceLogo';

export default class ImageInLWC extends LightningElement {
    salesforceLogo = SF_LOGO;
}

ImageInLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo

Labels:
LWC
Join the conversation