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
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

 
Hitesh Patil 843Hitesh Patil 843
Hii  Krishna Jammigumpula,
Have you got any solution on your  question. If you have solution can you share with me because I am facing same problem.
Chandhirasekaran Nataraj 5Chandhirasekaran Nataraj 5
Hi Raj Vakati,
The solution is not working Im getting '500 Internal Server error' for the below code 
<img src="/servlet/servlet.FileDownload?file=0692w000001OQM4AAO" alt="Description of the image"/>