+ Start a Discussion
krishna jammigumpulakrishna jammigumpula 

how to display pic using lightning component

I want to display or update  pic  awhen ever i want Example in linekedin there is profilepic where we can change our pic when ever we want like wase i want to update in community using lighting component


#Thanks in advance
Raj VakatiRaj Vakati
You can create very simple lightning component to display image from 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://ankushdureja--dev2--c.cs68.content.force.com/servlet/servlet.FileDownload?file=00P1D000000Iiyd"/>
</aura:component>

Refer this links

http://sfdcmonkey.com/2018/10/10/login-user-picture-lightning-component/

https://salesforceadvocate.com/2016/11/18/static-resources-lightning-component/

https://gist.github.com/peterknolle/e4dcd735b8ac3ee5b26c

http://peterknolle.com/image-preview-lightning-component/

https://www.biswajeetsamal.com/blog/displaying-static-resources-image-in-lightning-component/

https://www.jitendrazaa.com/blog/tag/lightning-component/ 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Krishna,

Greetings to you!

You can create a Lightning Component for Drag-and-Drop Profile Pictures. Please refer to the below links which might help you further with the above requirement.

https://developer.salesforce.com/blogs/developer-relations/2015/11/create-lightning-component-drag-drop-profile-pictures.html

http://sfdcmonkey.com/2018/10/10/login-user-picture-lightning-component/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Satyavathi PolepallySatyavathi Polepally
Hi, 
I am trying to display the image in Custom Signup form which is created by using Lightning component. I have used your code @Raj Vakati. But, its not displaying any image. I am trying to upload the image from a static resource. Can you plaese help  me in solving this.
Ajay K DubediAjay K Dubedi
Hi krishna jammigumpula,
Try the code it works fine.Image showing on component.
<aura:component>
 <body>
        <div class="card">
            <div class="card-header">
                <img src="{!$Resource.img}" class="img-fluid" alt="Responsive image" />
            </div>
        </div>
 </body>
</aura:component>
you can go with the link for create static resource process.
https://trailhead.salesforce.com/en/content/learn/modules/visualforce_fundamentals/visualforce_static_resources

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