0

I am calling a apex controller in lwc component to get the required image's static resource name & I want to use that Image in LWC component. Since I can't import the independent static resouce dynamically I wonder if I can use that static resource image without importing.

if can, then kindly suggest how?

I tried using Visualforce's URLFOR($Resource[StaticResourceName_variable]), but didn't work.

Note: All the Images StaticResources must be independent Resource. I cannot have a common zip-folder where I can put all these images together & then use them with single import,like suggested here How can I dynamically load a static resource image in LWC?

3

1 Answer 1

2

TL;DR use /resource/staticResourceName URL without import

Explanation

When a static resource is imported in LWC the the import variable contains url as '/resource/' + timestamp + staticresourceName for example-

import logoImage from '@salesforce/resourceUrl/org1Logo';

then the logoname will contain the url as follow-

logoImage = '/resource/1675163571000/org1Logo'

here 1675163571000 is time-stamp for version of Static Resource and you can ignore this if you are not updating the target static resource

ALternative & Perfect Solution

you can query the whole url from apex controller like this-

StaticResource static_resource = [  SELECT Name,Id, SystemModStamp
                                    FROM StaticResource 
                                    WHERE Name = 'staticResourceName'
                                    LIMIT 1];

String url_file_ref = '/resource/'
                      + String.valueOf(((DateTime)static_resource.get('SystemModStamp')).getTime())
                      + '/' 
                      + static_resource.get('Name');

url_file_ref will be same when you will import the same resource in lwc, so you can use this in same manner, like

  <img src={url_file_ref} alt="" />
           
               or

loadScript (this, url_file_ref)
          .then (() => {
            console.log ('url_file_ref loaded');
          })
             .catch (error => {
               console.error ('url_file_ref : ' + error);
          }),

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .