1

I am trying to dynamically load an image from a static resource within LWC. When the user loads the page, a query parameter is provided called locationCode. Depending on the locationCode, a different static resource will be used. The static resources have a format similar to Resource_Images_XX, where XX is the locationCode. I should note this is implemented within communities.

Since I won't know the locationCode until after the page has loaded, I cannot do the following:

import imageResource from '@salesforce/resourceUrl/Resource_Images_XX';

Is there an alternative way to load static resource images when I cannot use the import statement?

Would any of these URL paths work within my JavaScript file?

  • url('sfsites/c/resource/Resource_Images_CA/images/${this._backgroundImage}')
  • url('sfsites/c/file-asset/${this._backgroundImage}')
5

You would normally upload a ZIP file, and use it in the manner described in the docs:

import TRAILHEAD_CHARACTERS from '@salesforce/resourceUrl/trailhead_characters';

// ...

einsteinUrl = TRAILHEAD_CHARACTERS + '/images/einstein.png';

Loading a dynamic resource name directly is not supported; this is because the compiler will verify the resource name before successfully compiling, reducing the odds of typos or accidental removal of used resources.

0

I want to thank sfdcfox for his answer. Officially, dynamic resource loading is not supported. But I threw together a hack in case others need a similar solution.

Setup

Let's say you have a specific static resource format: Market_Resources_xx, where xx is some country code. Below is an example list:

  • Market_Resources_CA
  • Market_Resources_US
  • Market_Resources_DE

Solution

Create a generic static resource, called Market_Resources and fill it with whatever files/data you want. Then create your Market_Resources_xx static resources that will be used within your code.

In your LWC code, you will import the generic static resource and append the additional country code to the variable. See code below:

// Import the generic static resource. All this does is provide a URL to the resource.
import MarketResources from '@salesforce/resourceUrl/Market_Resources';

// ...
// Omitting code for simplicity.
// ...

// We can build our specific to the static resource, dynamically.
const countryCode = getCountryCode();
const resourcePath = `${MarketResources}_${countryCode}/path/to/resource.png`;

// Now we can dynamically load into DOM. For example a background image.
const containerElement = this.template.querySelector('.container');
containerElement.style.backgroundImage = `url('${resourcePath}')`;

Note

Obviously this is a hacky solution. It is error prone if static resources are misspelled but knowing there is a solution for dynamic resources makes me happy :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.