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.

  • What is a.image.Id? can you post code Commented Apr 10, 2017 at 9:10

2 Answers 2


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 :


Sample code


<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"/>


    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()); 


Apex Class:

public class TestCtrl {

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

        for (ContentDocument cont :[Select Id ,Title from ContentDocument]) {

        return [SELECT Id,Title FROM ContentVersion WHERE ContentDocumentId IN :contentIds];
  • 1
    If you use communities, the full url may be needed Commented Apr 11, 2017 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
    Commented Apr 11, 2017 at 7:40
  • Should this work with a pdf?
    – Tyler Zika
    Commented May 23, 2019 at 0:30

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=""/>
  • 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
    Commented Apr 10, 2017 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. Commented Apr 10, 2017 at 9:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .