Share Your Experience With Others

Show Image From Static Resource in LWC

Today we will see how we can show image from static resource in lightning web component.

1. First Save the image in Static Resource.

2. Create Lightning Web Component To Show the Image

Output:

Note:

  • If you want to use the image saved in static resource in community home page the image link is broken.
  • Because community link is different
  • For example: Your instance: na12.salesforce.com
  • Your community: mycommunity.com/support
  • For these images to be available, the home page component needs to use the relative URL, including the name of your community page.
  • For example : <img src=”/support/resource/13237000/PortalLogo> – Replace “/support/” with the name of your community page. 
  • Another workaround, is to use upload the image to the Documents tab, and enable the “Externally Available Image” setting.
  • Then, you can use the URL of this image on your home page component and it will be accessible to anyone, regardless of the domain.
  • You do not need to change the URL of the document, since it’s stored in server and is accessible to anyone. 

Leave a comment