How to display image in lightning component from ContentDocumentLink

Question

Does any one have idea about how to display image from files(in Lightning & API name is ContentDocumentLink)/* attachment in salesforce clasis*/ on Lightning component.

Answer 1

Yes, you can!

To give a brief idea how to do that,

You have to fetch the ID of the attachment from a server call and store it a aura:attribute.

<aura:attribute name="attchid" type="String" default="00P900000115nZx"/>

I defaulted it to 00P900000115nZx.

Once you have it, you can do the following.

<img src="{!'/servlet/servlet.FileDownload?file='+v.attchid}"/>

Answer 2

They way that you show Files is different than the way you show attachments. I have had success using

<img src='/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId={!ContendVersionId}' />

This particular one shows a thumbnail version, which you can find more documentation about here.

Answer 3

Another way is to first create a formula field on the Salesforce File object and query that for the image thumbnail using the parent object's ID. It's a very handy trick and can be used in a number of contexts. To do so:

1. Navigate to Setup → Object Manager → Content Version → Fields and Relationships → New

2. Create a new formula Field called (for example) "Field Image URL" with the following code:

   LEFT($Api.Enterprise_Server_URL_100, FIND( ".com", $Api.Enterprise_Server_URL_100 ) + 4)& "sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=" & Id & "&operationContext=CHATTER"

3. In a query, use the dot syntax to go from the ContentDocumentLink Object up through ContentDocument through LatestPublishedVersion to retrieve the custom formula.

   SELECT ContentDocument.Latestpublishedversion.Field_Image_URL__c FROM ContentDocumentLink WHERE LinkedEntityId = '[YOUR_OBJECT_ID]'

4. And you will have a handy image of the photo, PDF, Word Document, etc. in the file. (The same one used in previews of the document in other contexts.) And you can use it most anywhere.

Note rendition in the formula field specifies the size of the thumbnail to be generated.

Available Sizes:

• THUMB120BY90
• THUMB240BY180
• THUMB720BY480

If you want to get the actual file (and not a thumbnail), modify the formula as follows:

LEFT( $Api.Enterprise_Server_URL_100, FIND( ".com", $Api.Enterprise_Server_URL_100 ) + 4)& "sfc/servlet.shepherd/version/download/" & Id