Refer static resource in css of lightning component

Question

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?

Answer 1

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:

Answer 2

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

Answer 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.