How to display image in a lightning component

Question

My files are stored in 'files' under App launcher.

I have a Rich text box field 'description' in a object wherein i enter text and images. Here, the images are entered as tags. the 'src' attribute of tag contain the public url of the image which i stored in 'files' in the App launcher.

For eg:

<img src="https://<domain>.cs21.my.salesforce.com/sfc/p/#q00000000sNA/a/q00000008a0b/6woo3x9YQNR7vTXR2oOOmknAOjpytHMEnZc2nGQ3F54"/>

Now, i want to build a lightning component 'preview', which will take this field 'description' and read the image and show the text and image to the client to review.

I am stuck on how to read the img and display the image from the URL.

I am new to lightning. Can you please help me to achieve this?

Answer 1

Just posting my answer to help those who are facing the same issue.

The problem was with the src link. When we upload file in 'files' app launcher and we get a public link, this link will open in other browsers publicly but cannot be used for src purpose. To get the actual link, just open the image using the public link -> right click and select 'Copy image location'. the link which you get now is the suitable to insert in src attribute of .

for eg:

Below public link after uploading file on 'files' app luncher

https://<domain>.my.salesforce.com/sfc/p/#q00000000sNA/a/q00000008a0b/6woo3x9YQNR7vTXR2oOOmknAOjpytHMEnZc2nGQ3F54

Below correct link we get from 'Copy Image Location'

https://<domain>/sfc/dist/version/renditionDownload?rendition=ORIGINAL_Jpg&versionId=068q0000000RAdv&operationContext=DELIVERY&contentId=05Tq0000001RiQf&page=0&d=/a/q00000008a0b/6woo3x9YQNR7vTXR2oOOmknAOjpytHMEnZc2nGQ3F54&oid=<organization Id>&dpt=null&viewId=

Answer 2

The image url can be constructed using a little hack -

String picUrl = '';
ContentDistribution cd = [SELECT Id,  DistributionPublicUrl,ContentDownloadUrl, ContentVersionId FROM ContentDistribution where id =: cd.id];
picUrl =  cd.ContentDownloadUrl.replace('download/?' , 'renditionDownload?rendition=ORIGINAL_Jpg&');
picUrl = picUrl.replace('&ids' , '&versionId');

The generated URL from the above result can be used in the tags.