10

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
    /resource/resourcename/imagename.ext should work. – sfdcfox Oct 9 '16 at 5:35
  • I had already tried background-image: url("/resource/my_resources/warning.png") but that didn't work as well :-( – whoisthis Oct 9 '16 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 Oct 9 '16 at 5:49
  • Shouldn't you be using URLfor with the resource attempt? – Eric Oct 9 '16 at 7:07
  • @Eric I understood that with for visualforce pages and not for lightning. I tried that doesn't work either :-( – whoisthis Oct 9 '16 at 7:46
9

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

  • Strange that I tried it earlier it didn't work but now it seems to work. maybe the namespace I specified was not correct – whoisthis Oct 13 '16 at 7:28
5

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

  • This is the only solution that worked for me. Perhaps the other solutions have been deprecated? – captain_jim1 Mar 10 at 8:08
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.