+ Start a Discussion
Shilpa KambleShilpa Kamble 

Display image in lightning component from attachment/files.

Our notes & attchemnet are accessible through files(ie ContentDocumentLink replacement of attachment object), As we can not access/get attachment through lightning experience.
reference: https://help.salesforce.com/apex/HTViewSolution?urlname=Attachments-are-not-returned-in-Lightning-Experience-search&language=en_US
I want to display the attachment(image file) on lightning component, How can I display it?
I tried following code :
<apex:image url="/servlet/servlet.FileDownload—file=06941000000SKtyAAG" width="50" height="50" />  
 <apex:image url="/servlet/servlet.FileDownload?file={!attchmentId}"/>

 
bharath kumar 52bharath kumar 52

Instead can try using html tags in between and call a remote action?

This might be a workaround since lightning allows HTML tags to be nested. Do let us know if that works.

Shilpa KambleShilpa Kamble
I tried like this,
<img src="{!'/servlet/servlet.FileDownload?file='+v.attchid}"/>
It doesn't work & in console I get this error :
"https://lightningstrikers2016-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=06941000000SKtyAAG Failed to load resource: the server responded with a status of 500 (Server Error)"

If I open obove link, salesforce gives this error :
"Unable to Access Page
The value of the "file" parameter contains a character that is not allowed or the value exceeds the maximum allowed length. Remove the character from the parameter value or reduce the value length and resubmit. If the error still persists, report it to our Customer Support team. Provide the URL of the page you were requesting as well as any other related information. "
sfdcMonkey.comsfdcMonkey.com
hi shilpa
in your url
https://lightningstrikers2016-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=06941000000SKtyAAG
your id start with 069  its ContentDocument id not attachement id so
add image file in Attachment object and try again
Thanks
 
Dogan Turkcan 9Dogan Turkcan 9
Hi,

If this solves your problem, please mark it as the answer.

From Static Resource
Upload logo.jpg 
<img src="/resource/logo" />

From Attachment
CreateText Field: Image_Id__c--> Id of Attachment
Create Formula Field: Image__c--> "/servlet/servlet.FileDownload?file="&Image_Id__c
Paste the Id of attachment to Image_Id__c.

Lightning Component: <img  src="{!v.Product.Image__c}"  alt="Placeholder"/>
Ramakrishnan AyyanarRamakrishnan Ayyanar
Hi ALL,

I have also tried this thing , but i couldn't display image ..

component:

<aura:component controller="PicGalleryCardCtrl" implements="flexipage:availableForAllPageTypes,force:hasRecordId"
                access="global">

    
    <aura:attribute name="fullScreen" type="Boolean" default="false"/>
    <aura:attribute name="animations" type="Boolean" default="true"/>
    <aura:attribute name="recordId" type="String"  />
    <aura:attribute name="slides" type="String[]" />
    <aura:attribute name="slideIndex" type="Integer" default="0"/>
    <aura:attribute name="slideWidth" type="Integer" default="0"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <lightning:card iconName="utility:image" title=" Picture Gallery">
        <aura:set attribute="actions">
            <lightning:buttonIcon onclick="{!c.fullScreen}" size="large" iconName="utility:expand" />
        </aura:set>
      <aura:if isTrue="{!v.fullScreen==true}">
            <div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                   <div aura:id="gallery" class="gallery">
        <div class="filmstrip" style="{! 'margin-left: -' + (v.slideIndex * v.slideWidth) + 'px'}">
            <aura:iteration items="{!v.slides}" var="slide" indexVar="index">
         
             <div class="slide">
                 
                    <img src="{!slide}"  alt="Placeholder" />
                  
              
                      
             </div>
            </aura:iteration>    
       
        </div>
        <div class="{! v.slideWidth>640 ? 'btn prev x-large' : 'btn prev'}">
            <lightning:buttonIcon variant="border-filled" onclick="{!c.prev}" size="large" iconName="utility:chevronleft" />
        </div>
        <div class="{! v.slideWidth>640 ? 'btn next x-large' : 'btn next'}">
            <lightning:buttonIcon variant="border-filled" onclick="{!c.next}" size="large" iconName="utility:chevronright" />
        </div>
    </div>
       
                </div>
                
                <div class="btn slds-modal__close close x-large">
                    <lightning:buttonIcon variant="border-filled" onclick="{!c.closeDialog}" size="large" iconName="utility:close" />
                </div>
                
            </div>
            <div class="slds-backdrop slds-backdrop--open"></div>
        </aura:if>
    </lightning:card>

</aura:component>


server - ctrlr
global with sharing class PicGalleryCardCtrl
{

 @AuraEnabled
public static List<String> getImageUrls(Id parentId)
{
  
    List<String> ImgUrlsList=new List<String>();
   
   
    for(Attachment att : [select Id, Name, ContentType from Attachment where parentid=:parentId and ContentType in ('image/png', 'image/jpeg', 'image/gif')])
   {
       ImgUrlsList.add('/servlet/servlet.FileDownload?file='+att .id);
    }
   return ImgUrlsList;
}
}
rahul kumar 215rahul kumar 215
Hi Shilpa, You can display your image with the below one line if teh image is stored on this URL
<img id="img1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTAoY07I4a-BFifQMe_3wfTHFf1GHlYoyp_g7SkIMnGzFruRoy2aXdJQIib" >
Chandhirasekaran Nataraj 5Chandhirasekaran Nataraj 5
Hi,
I'm also facing the same problem. The below code is not displaying the Image "0692w000001OQM4AAO". Resulting in '500 Server Error'
<img src="/servlet/servlet.FileDownload?file=0692w000001OQM4AAO" alt="Description of the image"/>
Anyone, please let me know how to display an image stored in the Files section of a record using lightning component.