[SalesForce] How to dynamically load a static resource image in LWC

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}')

Best Answer

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.

Related Solutions

[SalesForce] accessing static resource in apex

If you want to get some file from zipped static resource, you can use getContent():

StaticResource static_resource = [SELECT Id, SystemModStamp
                                  FROM StaticResource 
                                  WHERE Name = 'My Zip Array'
                                  LIMIT 1];
String url_file_ref = '/resource/'
                    + String.valueOf(((DateTime)static_resource.get('SystemModStamp')).getTime())
                    + '/' 
                    + static_resource.get('Name')
                    + '/myfile.json';
PageReference file_ref = new PageReference(url_file_ref);
String res_json_body = file_ref.getContent().toString();

Please, remember, you can not always use this due to limitation on getContent() (it can not be used in triggers) and latest salesforce updates.

References:

https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_System_PageReference_getContent.htm

[SalesForce] Referencing Static Resource Images in a visualforce page

Why $Resource?

Sure you are free to use relative path and it will work but it will not work if you are packaging the static resource as a part of managed package because then you need namespace in the path .

Instead using $Resource takes care of handling namespace for you .

URL Approach - with or without timestamp?

The timestamp is essentially a version. Each new upload revision the timestamp. Without it, browsers cache the resource and each subsequent page load will pull from cache. Even if you upload a new version, any user who has already hit your page will have the cached version and the only way for them to get the new version is to dump their cache.

Best Answer

Related Solutions

[SalesForce] accessing static resource in apex

[SalesForce] Referencing Static Resource Images in a visualforce page

Related Topic