+ Start a Discussion
bharath kumar 52bharath kumar 52 

Display list of images from Attachment object in a lightning component

Hi All,

I am new to lightning development and am trying to accomplish the following :
1.)Display a list of pictures stored in attachment object.
2.)Select a pic and save it as dp.

Below is my implementation of the same. But i am not able to display them on the screen.
<!-- Component -->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                controller="displayAttchmentList" access="global">
    <aura:handler name="init" action="{!c.returnAttList}" value="{!this}" />
    <aura:attribute name="atlist" type="String"/>
   <!-- <aura:attribute name="contactId" type="String" default="0032800001EXXan"/>
    <aura:attribute name="Pic" type="String"/> -->
    	<table class="slds-table slds-table--bordered slds-table--cell-buffer">
                    <tr class="slds-text-title--caps" style="background: rgb(159, 170, 181);">
                        <th scope="col">
                            <div class="slds-truncate" title="Id">Id</div>
                        <th scope="col">
                            <div class="slds-truncate" title="Body">Attachment body</div>
                    <aura:iteration items="{!v.atlist}" var="acc">
                                <div class="slds-truncate">{!acc.Id}</div>
                                <div class="slds-truncate"><img src="https://resttestdomain-dev-ed.lightning.force.com/one/one.app#/sObject/0032800001EXXanAAH"/></div>
                          <!--  <td>
                                <div class="slds-truncate"><ui:outputRichText value="{!acc.body}"/>
                            </td> -->
returnAttList : function(component, event, helper) {

    var actionImage = component.get("c.getImage");
   /* actionImage.setParams({
        parentId : component.get("v.actId")

    actionImage.setCallback(this, function(a){
        var lsa=a.getState();
            console.log('LSA1 >>>>'+lsa);
        else if(lsa==="ERROR"){
            var error=response.getError();
            console.log('LSA2 >>>>'+lsa);
                if(errors[0] && errors[0].message){
       /* var attach = a.getReturnValue();
        component.set("v.imageSrc", "/servlet/servlet.FileDownload?file=" + attach.Id);
        console.log('>>>>>>>>>'+attach); */


	public static list<Attachment> getImage(){
        //Id parentId

    return [select Id, Name,Body, ContentType from Attachment 
            where parentid='0032800001EXXanAAH' and ContentType in ('image/png', 'image/jpeg', 'image/gif')];

Can someone tell me where i am going wrong because i am not able to display the list of attachments on the screen which is the primary step.
However, when i change it to any other sobject i am able todisplay those records on the screen.
NagendraNagendra (Salesforce Developers) 
Hi Bharath,

Your approach is trying to display the body of the attachment, this is problematic for 2 reasons:
  • You did not select the body in your SOQL, but even if you did - this should not work, and not a good practice.
  • Best practice for displaying an attachment is formatting its URL path with the attachmentId and displaying it like this (inside your <aura:iteration>):
<img src="{!'/servlet/servlet.FileDownload?file=' + acc.Id}"/>
Hope this helps.

Ajinkya DhasAjinkya Dhas
#SalesforceKid ⚡
Learn How to 𝗗𝗶𝘀𝗽𝗹𝗮𝘆 𝗜𝗺𝗮𝗴𝗲𝘀 In 𝗟𝗶𝗴𝗵𝘁𝗻𝗶𝗻𝗴 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 ☁️⚡️ Even for related objects.
lttps://lnkd.in/f2rXdwN (https://lnkd.in/f2rXdwN)
(𝗟𝗲𝗮𝗿𝗻. 𝗛𝗲𝗹𝗽. 𝗦𝗵𝗮𝗿𝗲.)
#salesforce #lightning #development