Displaying image from file on public Community Page with Lightning Web Component

Question

I am trying to display a list of records on a public Community page using a Lightning Web Component (to sign up to a programme). I can get a list of records and display an image from a static resource for each one. I would like to attach an image file to each tile to differentiate. I can get either the ContentDocument Id and/or the Version Id, but cannot get either to render the image incorrectly. I am using <img src={fileurl} /> where I am building fileurl in my javascript controller, but nothing I try works. I have tried each of the below with both the Salesforce and Community prefix and the File Id and the Version Id. I am wondering whether I need to build public link for each file or need a Static Resource for each record and link the record to the Static Resource?

• /sfc/servlet.shepherd/version/download/
• /servlet/servlet.FileDownload?file=
• /sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=

Answer 1

You need to use the DistributionPublicUrl in the ContentDistribution record that corresponds to the file's ContentVersion record.

ContentDistribution is created when you create a Public Link from the file's action menu in the UI. You can also create them in Apex.

UPDATE: While the DistributionPublicUrl can't be used directly in an HTML img tag, you can construct a valid img URL using parts of it. See this code:

public static String buildPublicUrl(ContentVersion cVersion, ContentDistribution cDist) {
    String fileType = cVersion.FileType.toLowerCase().capitalize();
    String cVersionId = cVersion.Id;
    String cBodyId = cVersion.ContentBodyId;
    String originalUrl = String.valueOf(cDist.DistributionPublicUrl);
    String cDistParam = originalUrl.substring(originalUrl.indexOf('/a/'));
    String orgId = ConnectApi.Organization.getSettings().orgId;
    String baseDomain = Url.getOrgDomainUrl().toExternalForm();
    baseDomain = baseDomain.substringBefore('.') + '--c.documentforce.com';
    String theUrl = baseDomain + '/sfc/dist/version/renditionDownload?rendition=ORIGINAL_' +
            fileType + '&versionId=' + cVersionId + '&operationContext=DELIVERY&contentId=' + cBodyId +
            '&page=0&d=' + cDistParam + '&oid=' + orgId + '&dpt=null&viewId=';
    return theUrl;
}