15

I have a static component where the content is loaded dynamically as html. The lightning component provides some styles to present that content. I would like to provide icons, images that are defined as 'Static Resources' to that content from css. Like if there is a div with class 'warningDiv' then the css can be,

.THIS .warningDiv {
  background-image: url('warning.png')
}

I tried adding the image as static resource and using the name of static resource like background-image: url('warning.png') and as well as using the $Resource expression background-image: url('!$Resource.resourcename') but both don't work.

Then I tried adding the image in an archive, load that in component using ltng:require but as styles and then tried to the image in css. That didn't work as well,

<ltng:require styles="/resource/my_resources"
              afterScriptsLoaded="{!c.init}" />


.THIS .warningDiv 
{
        background-image: url('./warning.png');
}

but maybe I am doing it wrong.

I know one of the work around is to modify the content and have but I would want to avoid that as it would mean modifying lot of content.

Is there a way to refer static resource images in css for lightning component?

5
  • 5
    /resource/resourcename/imagename.ext should work.
    – sfdcfox
    Commented Oct 9, 2016 at 5:35
  • I had already tried background-image: url("/resource/my_resources/warning.png") but that didn't work as well :-(
    – Bhupendra
    Commented Oct 9, 2016 at 5:44
  • Well, I gave it an honest try. I'm still learning Lightning myself... hopefully someone has an answer, and we'll all learn something new.
    – sfdcfox
    Commented Oct 9, 2016 at 5:49
  • Shouldn't you be using URLfor with the resource attempt?
    – Eric
    Commented Oct 9, 2016 at 7:07
  • @Eric I understood that with for visualforce pages and not for lightning. I tried that doesn't work either :-(
    – Bhupendra
    Commented Oct 9, 2016 at 7:46

3 Answers 3

15

you can certainly refer the static resource contents in your app/component.css using /resource/resource_name format.

Here's a sample app which I tried in my org to set div's background-image property by referring the slds loading image in the static resource.

testVFPage.app

<aura:application access="GLOBAL">
  <div>
     <div class="loading" style="height: 166px;width: 189px;">
     </div>
  </div>
</aura:application>

testVFPage.css

.THIS .loading{
    background-image: url(/resource/loading) 
}

Output:

enter image description here

2
  • Strange that I tried it earlier it didn't work but now it seems to work. maybe the namespace I specified was not correct
    – Bhupendra
    Commented Oct 13, 2016 at 7:28
  • Add single quotes url('/resource/loading')
    – Ragul
    Commented Aug 17, 2021 at 19:58
11

I have tried the answer by Praveen and when viewing the CSS in a browsers developer mode the css url() appears exactly as typed, ie. it's not converting the path '/resource/loading' to the static resource URL. Strangely this answer here on Stack Exchange seems to be the only discussion about this.

The way I have achieved this today is by reverse engineering the static resources that the community template itself uses as provided by Salesforce (note this will obviously only work in the context of sites and communities).

The static resource is called PFResources and contains a folder structure like:

  • img
  • icons
  • css

Inside 'img' are the images I want to use for the footer background. So the class definition in the Lightning component CSS is:

.THIS .class {
      background-image : url('/sfsites/c/resource/PFResources/img/partnerships.jpg');
}

This is currently working in both the community builder, preview and while logged into the site as a user.

Update: This is a documented solution for using custom fonts in a community so will work as a long term solution. The following article describes accessing static resources in this way although doesn't explicitly make reference to image files; suggesting this isn't just a 'hack' but is intended behavior. Use Custom Fonts in your community

4
  • 2
    This is the only solution that worked for me. Perhaps the other solutions have been deprecated? Commented Mar 10, 2019 at 8:08
  • 1
    Same here. I am building a Community Layout Component. Using /resource/my_resource to reference a png background image in my component's CSS file created an URL that lead to a page "Server is down for maintenance". So if I have a static resource named my_resource, I can reference it in my stylesheet like so: /customers/sfsites/c/resource/my_resource.
    – Hans
    Commented Jan 23, 2020 at 16:09
  • 1
    +1, thanks for sharing solution for Communities
    – Wookie88
    Commented Mar 16, 2020 at 15:32
  • If you use a custom url for your community, you can't lead with the site name. Commented Aug 18, 2020 at 17:52
3

for the selected answer, the url needs to be in quotes:

.THIS .loading{
    background-image: url('/resource/loading') 
}

thanks Hutchenstein for the tip for the correct path for rendering within a community. this is just what I was missing for one my components.

You must log in to answer this question.

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