3

I have to display an image in a lightning component. So in Salesforce classic I put this image in an attachment related to an object, but in lightning experience there is no attachment, or I didn't find them. There is only the possibility to add a file.

My question is how can I retrieve this file in my component ? For an attachment I retrieve the attachment like that :

List<Attachment> img = [select Id, Name, ContentType, parentId from Attachment 
                            where parentId in :listeId and ContentType in ('image/png', 'image/jpeg', 'image/gif')]; 

and in my component I put that :

<img src="{!'/servlet/servlet.FileDownload?file=' + a.image.Id}" alt=""/>

but it doens't retrieve me the url of the image in the file.

  • 1
    As of Spring 17 release, notes and attachments are replaced by Lightning notes and files. You will need to query chatter files, instead of attachment. – Salesforcesmarty Mar 1 '17 at 11:39
  • And how can I get the url of the image in the file after that ? – dou Mar 1 '17 at 13:28
0

If you can get the base64 encoded string from the Attachment, you can use that as src of the image.

Example:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Embedding_an_image_via_data_URL

Also check this answer:

https://stackoverflow.com/a/9511375/6110447

Edit: Query for Body of the Attachment, it is base64 encoded.

|improve this answer|||||
0

Look at this example. It reads a local file and displays content as image.

|improve this answer|||||
0

It's working for me. Use the below code

     doInitHelper : function(component, event) {var attachmentList = component.get("v.attachmentList");
        console.log('attachmentList--->',attachmentList);
        var slides = [];
        for(var i in attachmentList){
            slides.push("/servlet/servlet.FileDownload?file="+attachmentList[i].Id);
        }
        component.set("v.slides",slides);
       component.set("v.currentSlide",slides[0]);
    }

component code

  <img src="{! v.currentSlide}" height="500" width="500"/>
|improve this answer|||||

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.