Show Dynamic Image On Lightning Component From Files Section Of Record

Hi Everyone in this blog we are going to discuss about how to show image dynamically on lightning component without using static resource…

Photo by Sai Kiran Anagani on Unsplash

First let understand the problem statement →

Problem :-

You are working On a project in Ursa Major as a salesforce developer and you have a requirement in which you need to design a Catalog section of particular product in which you need to show product image and it’s detail in tile format and for product image you need to use record file section not static resource of salesforce.

Process →

Step 1 — Get the Document Id and Content Version Id from Record

Step 2 — Attach Content Version Id with specific URL

1. Get the Document Id and Content Version Id from Record

DynamicImage.js

({
    doInit : function(component){
       var action = component.get("c.getContentVersion");
       action.setCallback(this, function(response) {
           var state = response.getState();
           if(component.isValid() && state === 'SUCCESS') {
                 component.set("v.contentversion",response.getReturnValue()); 
           }
       });
        $A.enqueueAction(action);
    },

})

DynamicImage Apex Class

public class DynamicImage {

    @AuraEnabled
    public static List<ContentVersion> getContentVersion() {
        Set<Id> contentIds = new Set<Id>();

        for (ContentDocument cont :[Select Id ,Title from ContentDocument Where LinkedEntityId IN: yourcustomObjId ]) {
            contentIds.add(cont.Id);
        }

        return [SELECT Id,Title FROM ContentVersion WHERE ContentDocumentId IN :contentIds];
    }
}

2. Attach Content Version Id with specific URL

DynamicImage.cmp

URL → /sfc/servlet.shepherd/version/download/versionId

URL For Community →/sfsites/c/sfc/servlet.shepherd/document/download/versionId

<aura:component controller="DynamicImage" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    <aura:attribute name="contentversion" type="List" default="[]"/>
    <aura:attribute name="URL" type="String" default="/sfc/servlet.shepherd/version/download/"/>
    <aura:iteration items="{!v.contentversion}" var="content">
        <img src="{!v.URL + content.Id}" width="100" height="100"/>
    </aura:iteration>
</aura:component>

To learn more about ContentDocument and ContentVersion follow official Doc →

ContentVersion → Official Doc

ContentDocument → Official Doc

AND That’s It, We are Done 🙌🙌.

I hope you found the post useful !!, Please Follow & hit the clap button give your valuable feedback.

🎉🎉 Thanks a lot for reading till the end 🎉🎉

Feel free to reach out to me anytime .😊 Feedback and suggestions are Welcome .

Email: pradyumnsh007@gmail.com
LinkedIn: https://www.linkedin.com/in/pradyumn-sharma-59782a15a/
Github: https://github.com/sharmapradyumn