Display image which is stored in files

Question

How can I display an image which is stored in files?

For attachments I can use the code below, but it doen't work for files.

<apex:image id="Stat1" URL="/servlet/servlet.FileDownload?file=0698E0000008w5e" width="15" height="15"/>

Answer 1

Try this format <apex:image url="/sfc/servlet.shepherd/version/download/[DOWNLOADID]"/>.

How to get the DOWNLOADID?

Open the File, you will get a screen as below. Hover on the download link, you will get the DOWNLOADID as highlighted. Replace [DOWNLOADID] with the ID of the ContentVersion record you want to display.

Example:

<apex:image url="/sfc/servlet.shepherd/version/download/068i0000003ebfw"/>

VF Page :

<apex:page standardController="Account" >
    <apex:image url="/sfc/servlet.shepherd/version/download/0680H0000036GIH"/>
</apex:page>

Screenshot:

Answer 2

Working Code, Thanks to the answer above.

My VF with a Repeat Across a list of Files:

<apex:repeat value="{!files}" var="f">
    <div class="col col-6 col-md-4 col-lg-3 col-xl-2 my_vertmargin5">
        <div class="my_padded5 my_panel">
            <apex:image url="/sfc/servlet.shepherd/version/download/{!f.ContentDocument.LatestPublishedVersionId}"
                            alt="{!f.ContentDocument.LatestPublishedVersion.Title}" height="150px"/>
        </div>
    </div>
</apex:repeat>

My Controller Method with respect to a single record that the files are linked to:

public void GetFiles(){
    files = [SELECT Id, ContentDocumentId, ContentDocument.LatestPublishedVersionId,
    ContentDocument.LatestPublishedVersion.Title
    FROM ContentDocumentLink WHERE LinkedEntityId = :Job.Id];
}

NB: other code required like instantiating variables etc.

Answer 3

I've tried the solutions above with no success after few tries managed to view the image stored on files in my lightning component with similar url:

/sfc/servlet.shepherd/document/download/<YOUR FILE ID>

Answer 4

Thanks @all,

I've compiled all the info I got here for others: ​​​​​​​https://www.mhamzas.com/blog/2020/01/09/use-salesforce-files-image-file-on-lwc-aura-or-vf-page-as-tag/

Answer 5

Here's a complete solution, thanks to NZ Dev above, to display all Files attached to a record:

Apex Class:

public class FileViewerExtension {
    public ID recordId {get;set;}
    public list <ContentDocumentLink> files {set;get;}
    
    public FileViewerExtension(ApexPages.StandardController controller) {
        recordId = System.currentPageReference().getParameters().get('id');
        files = [SELECT Id, ContentDocumentId, ContentDocument.LatestPublishedVersionId, ContentDocument.LatestPublishedVersion.Title FROM ContentDocumentLink WHERE LinkedEntityId = :recordId];
    }
}

VFpage:

<apex:page standardController="YOUROBJECT__c" extensions="FileViewerExtension">
    <apex:repeat value="{!files}" var="f">
        <apex:image url="/sfc/servlet.shepherd/version/download/{!f.ContentDocument.LatestPublishedVersionId}" width="150px"/>
    </apex:repeat>
</apex:page>