static resource in aura component -- 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

by
2,260 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.

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

 

 

Final Output →

static resource in aura component -- w3web.net

 

You can download file directly from github by Click Here.

 

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

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 

StaticResourceImgCmp.cmp [Lightning Component File]

  1.    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  2.     <aura:html tag="style">
  3.         .imgBdr{border:1px #ccc solid;}        
  4.     </aura:html>
  5.     <div class="slds slds-p-around_medium">
  6.         <h3 class="slds-section__title slds-section__title-action slds-m-bottom_medium"><strong>Static Resource Zip</strong></h3>
  7.         <div class="slds slds-grid">
  8.             <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.salesforceLogoZip + '/salesforce-logo1.png'}" style="width:200px; height:150px;" /> </div>
  9.             <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.salesforceLogoZip + '/salesforce-logo2.png'}" style="width:200px; height:150px;" /> </div>
  10.             <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.salesforceLogoZip + '/salesforce-logo3.png'}" style="width:200px; height:150px;" /> </div>
  11.         </div>
  12.  
  13.         <br/>
  14.         <h3 class="slds-section__title slds-section__title-action slds-m-bottom_medium"><strong>Static Resource Direct</strong></h3>
  15.         <div class="slds slds-grid">
  16.             <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.salesforceLogo}" style="width:200px; height:auto;" /> </div>
  17.             <div class="slds-col slds-size_4-of-12"><img class="imgBdr" src="{!$Resource.w3webLogo}" style="width:200px; height:auto;" /> </div>
  18.         </div> 
  19.  
  20.     </div>
  21.  
  22. </aura:component>

 

Create Lightning Application

Step 2:- Create Lightning Application : StaticResourceImgCmpApp.app

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

StaticResourceImgCmpApp.app [Component Application File]

  1.   <aura:application extends="force:slds">
  2.     <c:StaticResourceImgCmp/>
  3. </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.

Related Topics | You May Also Like

 
Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder
👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration


Hi, This is Vijay Kumar behind the admin and founder of w3web.net. 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

Leave a Comment