SFDC Dynamic Image Component (LWC)

Posted bySandeep KumarPosted inLightningTags:

Problem: Currently its very hard to add proper size image to the app builder or lightning community builder dynamically.

Solution: In order to solve the above problem, I have build a reusable component which will display image based on the configurable height, width and static resource name where image is uploaded.

Basically, We will create a dynamic Image component which will pick image from static resource. Let’s dive into the code-

displayImage.html

<template>
    <template if:true={imgURL}>
        <div class='imagestyle'>
						<img src={imgURL} style={imgStyle} />
				</div>
		</template>
</template>

displayImage.css

.imagestyle {
		text-align:center;
}

displayImage.js

import { LightningElement,api,track,wire } from 'lwc';
import GetResourceURL from '@salesforce/apex/DisplayImageController.getResourceURL'
export default class Displayimage extends LightningElement {
 
    @api image ='';  
    @api Height;
    @api Width;
		@track imgURL= false;
		@track imgStyle;
    @wire(GetResourceURL,{resourceName : '$image'}) weire({data,error}){
		if (data) {
			this.imgURL = data;
			this.imgStyle = 'width : ' + this.Width + ';' + 'height:' + this.Height + ';';
			console.log(data);
		} 
		else if (error) {
			console.log(error);
		}
	}
}

displayImage.js-meta.xml

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

    <targetConfigs>
        <targetConfig targets="lightning__AppPage, lightning__HomePage">
            <property name="image" type="String"  label="Enter static resource name"></property>
            <property name="Height" type="String"  label="Height" ></property>
           <property name="Width" type="String"  label="width" ></property>
        </targetConfig>
				<targetConfig targets ="lightningCommunity__Default">
            <property name="image" type="String"  label="Enter static resource name"></property>
            <property name="Height" type="String"  label="Height"></property>
           <property name="Width" type="String"  label="width"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

DisplayImageController class

public with sharing Class DisplayImageController {

    @AuraEnabled(cacheable=true)
    public static String getResourceURL(String resourceName) {
            List<StaticResource> resourceList = [
                SELECT Name, NamespacePrefix, SystemModStamp 
                FROM StaticResource 
                WHERE Name = :resourceName
        ];
                            
        if (resourceList.size() == 1) {
           String namespace = resourceList[0].NamespacePrefix;
           return '/resource/' 
              + resourceList[0].SystemModStamp.getTime() + '/' 
              + (namespace != null && namespace != '' ? namespace + '__' : '') 
              + resourceName; 
        } else return '';
    }
}

Now upload some images in static resources for testing….

Now create an app builder page and drag & drop this component and configure its properties as shown below-

In this example, we have dragged & dropped component two times & set its properties accordingly

Output:

Images are dynamically displayed from static resource using configurable height and width

Published by Sandeep Kumar

He is a Salesforce Certified Application Architect having 11+ years of experience in Salesforce.

2 thoughts on “SFDC Dynamic Image Component (LWC)”

Leave a Reply