function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
farah sheriffarah sherif 

where can I add a picture in the below lightining component and how to add it

<aura:component implements="lightning:homeTemplate" 
                description="Lightning Home Page Template with One Region" >
    <aura:attribute name="column1" type="Aura.Component[]" />
    
    
    <div>
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">
                {!v.column1}
            </lightning:layoutItem>
           
        </lightning:layout>
    </div> 
</aura:component>
Raj VakatiRaj Vakati
try like this
  
<aura:component implements="lightning:homeTemplate" 
                description="Lightning Home Page Template with One Region" >
    <aura:attribute name="column1" type="Aura.Component[]" />
    
    
    <div>
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">
                {!v.column1}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" flexibility="grow" 
			
			    <img src="http://www.robotmag.com/images/frontpage.jpg"/>
            </lightning:layoutItem>

           
        </lightning:layout>
    </div> 
</aura:component>

 
farah sheriffarah sherif
does not work
 
Deepali KulshresthaDeepali Kulshrestha
Hi farah,

If you want to add an image in lightning use the static resource to render the image in lightning.

You can create very simple lightning component to display image from the static resource or attachment/file
Static resource

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <img src="{!$Resource.StaticResourceName}"/>
</aura:component>

if you are using attachment or file. View attachment and use that URL like this:    

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <img src="https://cc.cs68.content.force.com/servlet/servlet.FileDownload?file=00P1D000000Iiyd"/>
</aura:component>


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
SEKAR RAJ.SEKAR RAJ.
Hi Farah,
// Displaying  images from the record
<aura:component implements="lightning:homeTemplate" 
                description="Lightning Home Page Template with One Region" >
    <aura:attribute name="column1" type="Aura.Component[]" />
    <aura:attribute name="recoId" type="Id" />
    <aura:attribute name="targetFields" type="CustomObject__c" />

    <force:recordData aura:id="propRecord"
                      recordId="{!v.recoId}"
                      targetFields="{!v.targetFields}"
                      fields="Name, Thumbnail__c"
                      />

 <div class="slds-media">
        <div class="slds-media__figure">
           //Pass the thumbnail image field in the value 
            <img src="{!v.targetFields.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}" />
        </div>
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">
                {!v.column1}
            </lightning:layoutItem>
           
        </lightning:layout>
    </div> 
</aura:component>


************************
// Displaying image from the static resource
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
           <img src="{!$Resource.StaticResourceName}"/>
</aura:component>

***************************
// Displaying the image from the attachment /File
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
            <img src="https://ankushdureja--dev2--c.cs68.content.force.com/servlet/servlet.FileDownload?file=00P1D000000Iiyd"/>
</aura:component>

Thanks,
SEKAR RAJ