function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Darryl John OngDarryl John Ong 

Referring to Static Resource Images in Lightning Components + Community Builder

Hi,

I am trying to refer to image assets from Static Resources through the standard url format: /resource/<resource name> in lightning components. It works well hosting them in a lightning app, but it's 404 into Community Builder since it doesn't prepend /sfsites/c unlike what <ltng:require> does when loading scripts and styles (context-aware). Is there a workaround for this?

Regards,
Darryl
MikenameMikename
Only work around I could figure out is setting the img src via css content ( https://developer.mozilla.org/en-US/docs/Web/CSS/content ).

Make a zip/resource bundle with a style sheet and a set of images in it.

ltng:require in a style sheet that looks like:

.my-icon{
  content:url('./myImage.png');
}

Then you have a relative url that seems to work in both communities and /one/one.app. I can't figure out a workaround for svg url's and the ltng svg helper component that is in common use. I really wish we had a URLFOR equivalent.
Darryl John OngDarryl John Ong
Hi, I see that would work if you have statically set up images.

Sadly, it would be a hassle if you have programatically determined images (my use case), you will have to refer to them by css class names and have to always add an entry in the css for any new images.

Thanks, though. Yeah, I also hope that they provide a url handler for this.
Ryan Villamin 9Ryan Villamin 9
Hi,

I've had the same issue and this is how I worked around it:

<img src="{!'sfsites/c' + $Resource.<resource name>}"/>

or

<img src="{!'sfsites/c' + $Resource.<resource name> + '/backgrounds/my-image.jpg'}"/>

.. for archived resources.

I couldn't get this to work before but it does now with the Summer '16 update. Hope this helps!
Ryan Villamin 9Ryan Villamin 9
Looks like you don't need to preppend 'sfsites/c' anymore. Just $Resource.<resource name> will do.
Aakanksha SinghAakanksha Singh
Hello,
You can refer to the static resource by using the following method:

for stylesheets: <ltng:require styles="{!$Resource.<your_resource_name> +
             '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>

for image: <img src="{!$Resource.<your_resource_name> + '/assets/icons/action/user_60.png'}"></img>

Thanks
Regards