4

I'd like to display on a lightning component an image, that is stored in the ContentDocument object in lightning experience.

Before I used the Attachment in salesforce classic, with something like that : <img src="{!'/servlet/servlet.FileDownload?file=' + a.image.Id}" alt=""/>, but I need to use it in lighning experience.

I try to use this post but I don't really understand how it works and I can't retrieve the image.

1
  • What is a.image.Id? can you post code
    – Amit
    Apr 10 '17 at 9:10
16

Looking at the Data Model of the Content Object as mentioned in this post, it looks like you need to get Id of the ContentVersion which is tied to you the ContentDocument record. Also to display Contents, the relative url path should be in below format :

/sfc/servlet.shepherd/version/download/contentversionid

Sample code

myApp.app:

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

controller.js

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

})

Apex Class:

public class TestCtrl {

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

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

        return [SELECT Id,Title FROM ContentVersion WHERE ContentDocumentId IN :contentIds];
    }
}
3
  • If you use communities, the full url may be needed Apr 11 '17 at 7:19
  • 1
    @NicolasVuillamy I don't think we need full url, all we need is the NetworkPrefix along with relative url if we need to display it in community. I've seen a case where the image not getting displayed in Preview mode but it shows up in when the community is published.
    – Praveen
    Apr 11 '17 at 7:40
  • Should this work with a pdf?
    – Tyler Zika
    May 23 '19 at 0:30
0

You can still use an tag to show the image from ContentDocument. All you need to do is query and get the file ID from server.

Apex class:

return [Select Id ,Title from ContentDocument Where Name = :Your File Name LIMIT 1].Id;

You need to use the ID to form the URL in img tag like you used to do in VF.

Lightning Component:

<img src="{!'/servlet/servlet.FileDownload?file=' + v.fileId}" alt=""/>
2
  • It doesn't work either, I can't retrieve the image in my component, when I look at the image url I got that : mydomainname-ed.lightning.force.com/servlet/… so the Id of the image is not retrieved correctly
    – dou
    Apr 10 '17 at 8:12
  • That depends how you are fetching the record id, you may want to update the question with your apex side code and JS controller. Apr 10 '17 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.