How do you display an image from static resources in Aura component? | How to get static resource url in salesforce | import from @salesforce/resourceUrl to the component's JavaScript file

446 views

Hey guys, today in this post we are going to learn about How do you display an image from static resources in Aura component in Salesforce.

Static resources allow you to upload content you can reference in a Lightning Web Component Lightning Component, including archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files.

The $Resource global value provider lets you reference images, style sheets, and JavaScript code you’ve uploaded in static resources. To get more details about Static Resources, Click Here.

Download ebooks:- Click here to download E-Book "The most 20 popular articles of w3web.net"

Final Output →

Other related post that would you like to learn in Salesforce

Find the below steps ▾

Create Lightning Component

Step 1:- Create Lightning Component : StaticResourceImgCmp.cmp

From Developer Console >> File >> New >> Lightning Component

StaticResourceImgCmp.cmp [Lightning Component File]

   <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:html tag="style">
        .imgBdr{border:1px #ccc solid;}        
    </aura:html>
    <div class="slds slds-p-around_medium">
        <h3 class="slds-section__title slds-section__title-action slds-m-bottom_medium"><strong>Static Resource Zip</strong></h3>
        <div class="slds slds-grid">
            <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.salesforceLogoZip + '/salesforce-logo1.png'}" style="width:200px; height:150px;" /> </div>
            <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.salesforceLogoZip + '/salesforce-logo2.png'}" style="width:200px; height:150px;" /> </div>
            <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.salesforceLogoZip + '/salesforce-logo3.png'}" style="width:200px; height:150px;" /> </div>
        </div>
        
        <br/>
        <h3 class="slds-section__title slds-section__title-action slds-m-bottom_medium"><strong>Static Resource Direct</strong></h3>
        <div class="slds slds-grid">
            <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.salesforceLogo}" style="width:200px; height:auto;" /> </div>
            <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.w3webLogo}" style="width:200px; height:auto;" /> </div>
        </div> 
        
    </div>
    
</aura:component>

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<aura:html tag="style">

.imgBdr{border:1px #ccc solid;}

</aura:html>

<h3 class="slds-section__title slds-section__title-action slds-m-bottom_medium"><strong>Static Resource Zip</strong></h3>

</div>

<br/>

<h3 class="slds-section__title slds-section__title-action slds-m-bottom_medium"><strong>Static Resource Direct</strong></h3>

</div>

</aura:component>

Subscribe My Channel :- Tech W3web - YouTube

Create Lightning Application

Step 2:- Create Lightning Application : StaticResourceImgCmpApp.app

From Developer Console >> File >> New >> Lightning Application

StaticResourceImgCmpApp.app [Component Application File]

  <aura:application extends="force:slds">
    <c:StaticResourceImgCmp/>
</aura:application>

<aura:application extends="force:slds">

<c:StaticResourceImgCmp/>

</aura:application>

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link – YouTube

FAQ (Frequently Asked Questions)

What are static resources?

Static resources are resources not assigned to a path network and therefore do not visibly move. A static resource may be needed to perform an operation at only one location, such as an inspection operator, and will appear during the entire simulation in the same place it was defined graphically.

Where are static resources in Salesforce?

From Setup, enter Static Resources in the Quick Find box, then select Static Resources. Click New. In the Name text box, enter the text that should be used to identify the resource in Visualforce markup.

How use static resource js file in LWC?

Deploy this LWC to org. Refresh the org page and we should see the console log indicating that the helloModule static resource has been successfully loaded. Deploy to org, refresh, click on the button, and we should see the log from helloModule printed to the console.

Author of w3web.net

Hi, I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How do you display an image from static resources in Aura component? | How to get static resource url in salesforce | import from @salesforce/resourceUrl to the component’s JavaScript file