Showing Image in Lightning Layout Item in Salesforce LWC

Showing Image in Lightning Layout Item in Salesforce LWC

Sample Code:

HTML:

<template>
    <lightning-card>
        <div class="c-container">
            <lightning-layout>
                <lightning-layout-item padding="around-small">
                    <div class="header-column">
                        <img
                            src="https://infallibletechie8-dev-ed--c.documentforce.com/servlet/servlet.ImageServer?id=0155f000000F6it&oid=00D5f000001y2Vs"
                            height="200"
                            width="200"/>
                    </div>
                </lightning-layout-item>
            </lightning-layout>
        </div>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';

export default class LightningLayout extends LightningElement {}

meta.xml:

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

Output:

Leave a Reply