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

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.

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


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

No votes yet