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
Shivangi VermaShivangi Verma 

How to Create clickable images in lightning component ?

Hi All,
I have a requirement to create a lightning component in which i want to display the images as links. On clicking the image an action should be called from the Js controller. Please let me know how to do this in lightning.
Best Answer chosen by Shivangi Verma
Shivangi VermaShivangi Verma
Hi All,
Using the attribute 'title' instead of value worked for me.
Component : 
<div class="slds-align_absolute-center" onclick = "{!c.createRecord}" title = "Airport Fam Trip">
Controller : 
createRecord: function(component, event, helper) {
var createRecordEvent = $A.get("e.force:createRecord");
var recid, rectype,RecTypeID;
rectype = event.currentTarget;
RecTypeID =  rectype.getAttribute("title");

Thank you to all for your help. 
Shivangi
 

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Shivangi,

Greetings to you!

You can place the image in a span or div: 
<aura:component >
    <div onclick="{!c.clickHandler}">
        <img src="{!$Resource.Your_Resource_Name}"/>
    </div>
</aura:component>

Controller: 
({
	clickHandler : function(component, event, helper) {
		alert('You just clicked an image');
	}
})

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
Raj VakatiRaj Vakati
You can do it in many ways

1 . Just place the contents of your component in a span or div:
  
<aura:component>
    <aura:attribute ... />
    <div onclick="{!c.clickHandler}">
        main content here
    </div>
</aura:component>
2 . Call it a a tag 

  
<aura:component>
    <aura:attribute ... />
    <a href ="" img="">
        main content here
    </a>
</aura:component>

 
Shivangi VermaShivangi Verma
Hi Anas,
I want to basically use icon instead of image. Currently i have a button below the icon and users have to click the button to call the function. Is there a way i can associate icon with click event since i am  using the 'event.getSource().get("v.label")' to fetch the value from the button and use it as the record type to create new record. I want to associate some event to the icon. Please see my current code below : 

Component :
<div class="slds-align_absolute-center"> 
                          <lightning:icon iconName="custom:custom20" size="large" />  
                    </div>
                
                    <div class="slds-align_absolute-center"> 
                            <lightning:button class="slds-button" label = "XYZ" onclick = "{!c.createRecord}" variant="brand" /> 
                       </div>

here XYZ is the record type for the create event.


Controller :
createRecord: function(component, event, helper) {
               var createRecordEvent = $A.get("e.force:createRecord");
            var RecTypeID = event.getSource().get("v.label");
}

Thanks
Shivangi
Ajay K DubediAjay K Dubedi
Hi Shivangi,

Firstly you have to add image to static resource and then follow the below code it may be helpful for you: 
Component:
<aura:component>
<a href="https://app.grammarly.com/" onclick="{!c.doSomething}">
        <img src="{!$Resource.imgUrl}"/>
    </a>
</aura:component>
Controller:
doSomething : function(component,event, helper) {
           console.log('Hey There .. the anchor was clicked');
           console.log(event);
           var href = event.srcElement.href;
           console.log(href);

        }
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
Khan AnasKhan Anas (Salesforce Developers) 
Hi Shivangi,

If you want the clickable icon in the lightning component then also you can place the icon component in a span or div:
  
<div class="slds-align_absolute-center" onclick="{!c.clickHandler}"> 
      <lightning:icon iconName="custom:custom20" size="large" />  
</div>

If you want an icon on a button you can use iconName attribute on lightning:button:
  
<lightning:button class="slds-button" 
                      label = "XYZ" 
                      onclick = "{!c.createRecord}" 
                      variant="brand" 
                      iconName="custom:custom20"
                      iconPosition="left"/>

Regards,
Khan Anas
Shivangi VermaShivangi Verma
Hi All,
I had tried button icon but the problem with button icon is it is too small. Even the max size is not that  large as the icon so i used the icon by itself. How can I capture the event values from the icon.  I tried the following snippet but it is not working. I want to fetch the record type name value from the icon somehow.
Component : 
<div class="slds-align_absolute-center" onclick = "{!c.createRecord}" value = "XYZ">
<lightning:icon iconName="custom:custom20" size="large"/>
</div>
here 'XYZ' is the record type

Controller : 
createRecord: function(component, event, helper) {
var createRecordEvent = $A.get("e.force:createRecord");
var recid, rectype,RecTypeID;
rectype = event.currentTarget;
RecTypeID =  rectype.getAttribute("value");

Thanks
Shivangi
 
Shivangi VermaShivangi Verma
Hi All,
Using the attribute 'title' instead of value worked for me.
Component : 
<div class="slds-align_absolute-center" onclick = "{!c.createRecord}" title = "Airport Fam Trip">
Controller : 
createRecord: function(component, event, helper) {
var createRecordEvent = $A.get("e.force:createRecord");
var recid, rectype,RecTypeID;
rectype = event.currentTarget;
RecTypeID =  rectype.getAttribute("title");

Thank you to all for your help. 
Shivangi
 
This was selected as the best answer
Sathiya Subbaraj 6Sathiya Subbaraj 6
Hi Khan Anas,

How do we use our own custom icon instead of the available custom icons? is it possible?

Thanks,
Sathiya
Akshay MenseAkshay Mense
Can we achieve this in LWC?