Dynamic reference to static resource in lightning component

Question

In lightning, we can reference to static resource by a value provider like:

<img src="{!$Resource.staticResource}"/>

Is there any smart way to make it dynamic like:

<aura:attribute name="resourceName" type="String" default="res"/>
<img src="{!$Resource.v.resourceName}"/>

For VF+Apex it was possible, but the documentation for Lightning does not say anything about that kind of possibility. Have anyone, by chance, found a smart way to do that ?

Thanks!

Answer 1

Ok, I've found 1 way, but it's not official (not stated anywhere), so not sure how long it would work - use at your own risk!

<img src="{!'/resource/'+v.resourceName}"/>

If anyone founds any other way - please share.

Answer 2

Yes, I found out the way to display the resource name dynamically. You can do that using below statement,

src = "{!$Resource.resourceName + '/parentFolderName/' + v.imageName + '.jpeg'}"

Note : Make sure image extension should ".jpeg' (you can change image extension whichever you want).

Hope this will resolve your problem.

Answer 3

To further elaborate on @KamilK answer, if you have a custom URL set up (force.com/customer), you need to add that to the resource URL: {!'/customer/resource/' + v.resourceName}

Answer 4

According to this Salesforce Developers Blog post By David Green Advanced SEO for Lightning Communities in the Adding social media tags section

Note that in the future we plan to support $Resource.resourceName in our meta tag editors, but for now you should leverage the following URL pattern for static resources within Community Builder: /sfsites/c/resource/{resource name}.

I tried that and it worked with {!'/sfsites/c/resource/'+v.source}