Refer static resource in css of lightning component

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

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

Attribution
Source : Link , Question Author : Bhupendra , Answer Author : Praveen

Leave a Comment