1

I am trying to display images stored in attachment object for a particular contact using a lightning component but i am not able to do so i.e the page appears blank. Below is my code.

ApexMethod :

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


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

Component :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                    controller="displayAttchmentList" access="global">
        <!--force:LightningQuickAction,force:hasRecordId,-->
        <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"/> -->
        <div>
            <table class="slds-table slds-table--bordered slds-table--cell-buffer">
                    <thead>
                        <tr class="slds-text-title--caps" style="background: rgb(159, 170, 181);">
                            <th scope="col">
                                <div class="slds-truncate" title="Id">Id</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate" title="Body">Attachment body</div>
                            </th>


                        </tr>
                    </thead>
                    <tbody>



                        <aura:iteration items="{!v.atlist}" var="acc">
                            <tr>
                                <td>
                                    <div class="slds-truncate">{!acc.Id}</div>
                                </td>
                                <td>
                                    <div class="slds-truncate"><ui:outputRichText value="{!acc.Body}"/></div>
                                </td>

                              <!--  <td>
                                    <div class="slds-truncate"><ui:outputRichText value="{!acc.body}"/>
    </div>
                                </td> -->

                            </tr>



                        </aura:iteration>
                    </tbody>
                </table>



        </div>




    </aura:component>

Controller.js :

({
    returnAttList : function(component, event, helper) {
        var action=component.get("c.initdisplayMethod");

        action.setCallback(this,function(a){

            component.set("v.atlist",a.getReturnValue());
            console.log('rtn value >>>>'+a.getReturnValue());

            //console.log('rtn value >>>>'+JSON.stringify(a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

1 Answer 1

2

Your approach is trying to display the body of the attachment, this is a problematic from 2 reasons:

  1. you did not select the body in your SOQL, but even if you did - this should not work, and not a good practice.

  2. 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}"/>

2
  • Hi Itai, Thanks for responding. But, the approach you suggested is also not working. I tried putting console.log to see what has been retrieved and im getting a.getReturnValue() as undefined. Sep 18, 2017 at 8:30
  • check for errors in your response: a.getState() Sep 18, 2017 at 8:32

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.