Get the image in file - lightning experience

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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