How to Use Static Resources In LWC

By | August 16, 2022

In this blog, we are going to discuss “How to Use Static Resources In LWC” which will help you understand static resources and their uses in Salesforce. Generally Static resources allow you to upload content that you can reference in a Visualforce page, including archives (such as .zip and .jar files), images, style sheets.

Steps on “How to Use Static Resources In LWC”

Mentioned below are the steps to follow for adding the static resources to Salesforce LWC components:-

  • First, create “testingstaticresources” zip file and add any image inside it.
You can provide any name to the file, but make sure that you are using the new name in the code snippets accorindlgy.
How to Use Static Resources In LWC
Static Resources
  • Before that, you have to create a folder with a . Zip extension and extract it.
  • Because you have to choose the zip file in static resources.
  • In that Paste an image as you want.
  • Now let’s add this to LWC.
  • This is the HTML code:-
Static Resources LWC HTML Code
Static Resources LWC HTML Code
  • This is the Javascript code:-
Static Resources LWC JS Code
Static Resources LWC JS Code
  • This is the XML code below-
Static Resources LWC Meta Xml Code
Static Resources LWC Meta Xml Code
  • Now to add this go to setup and click on the Edit page just drag and drop your custom LWC.
  • And add this to any record page.
  • As we have added this to an Account record page. And you can see the below image after adding this in the Lightning App builder.
Account Record Page
Account Record Page

Using the details mentioned in the steps above, we hope you are be able to undertand on “How to Use Static Resources in LWC”. You can find more details on Static Resource in Salesforce on their help page here.

We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please get in touch with us at

About Us
Greytrix – a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.

Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration for Sage X3Sage 100 and Sage 300 (Sage Accpac). We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data MigrationIntegrated App developmentCustom App development and Technical Support to business partners and end users.
Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star rated app listed on Salesforce AppExchange.

The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.

For more information on our Salesforce products and services, contact us at We will be glad to assist you.

Related Posts