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
MisbahTehseen Parathanalli 3MisbahTehseen Parathanalli 3 

i want to user an image as a link to redirecting to another page once we click on it using lightning.

Hi All,
i have a requirement in which i am supposed to create a lightning component and use an image as a button which when clicked will redirect to another page. Can anybody help me with this please?



Thanks in advance.
 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Misbah,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >
    
    <aura:attribute name="url" type="String"/>
    <aura:attribute name="pageReference" type="Object"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <lightning:navigation aura:id="navService"/>

    <img src="{!$Resource.Image_Name_In_Static_Resource}" onclick="{!c.handleClick}"/>
</aura:component>

Controller: 
({
    init : function(cmp, event, helper) {
    },
    
    handleClick : function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__ComponentName"  // c__YourComponentName - Component to which you want to redirect/navigate.
            }
        }
        
        navService.navigate(pageReference);
    }   
})

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