Adding image button in Lightning

Hello Folks,

Recently, some one asked a way to add image for a Button in Lightning Component. I have been working on Lightning Components for past two months. So I thought of writing this post.

Let me split this in two steps.

1) Add Image in Static Resource

2) Add Image for a button

 

1) Add Image in Static Resource

Upload your image in Static Resource to use this image in Lightning Component.

2) Add Image for a button

Use the following code to add Image for a button

<aura:component implements="force:appHostable">
    <button type="button" onclick="{!c.yourMethod}">
    	<img src="/resource/1439974696000/ImageFile"/> 
    </button>
</aura:component>

In img tag, you have to give the link to refer the static resource.

Copy the link of View file in Static Resource. It should look like follow.

https://ap1.salesforce.com/resource/1439974696000/ImageFile

Remove the Org instance and copy the remaining and it should look like the follow 

 /resource/1439974696000/ImageFile

Add this link in img tag in your Lightning component.Add your user interface will look like the following.

I hope this post useful to add Image for a Button in lightning component.

Happy Coding smiley

Rating: 
No votes yet