Using $Resource lets you reference assets by name, without worrying about the gory details of URLs or file paths. You can use $Resource in Lightning components markup and within JavaScript controller and helper code.
<aura:component> <!-- Stand-alone static resources --> <img src="{!$Resource.generic_profile_svg}"/> <img src="{!$Resource.yourNamespace__generic_profile_svg}"/> <!-- Asset from an archive static resource --> <img src="{!$Resource.SLDSv2 + '/assets/images/avatar1.jpg'}"/> <img src="{!$Resource.yourNamespace__SLDSv2 + '/assets/images/avatar1.jpg'}"/> </aura:component>
<aura:component> <ltng:require styles="{!$Resource.SLDSv2 + '/assets/styles/lightning-design-system-ltng.css'}" scripts="{!$Resource.jsLibraries + '/jsLibOne.js'}" afterScriptsLoaded="{!c.scriptsLoaded}" /> </aura:component>
To obtain a reference to a static resource in JavaScript code, use $A.get('$Resource.resourceName').
({ profileUrl: function(component) { var profUrl = $A.get('$Resource.SLDSv2') + '/assets/images/avatar1.jpg'; alert("Profile URL: " + profUrl); } })
Global value providers in the Lightning Component framework are, behind the scenes, implemented quite differently from global variables in Salesforce. Although $Resource looks like the global variable with the same name available in Visualforce, formula fields, and elsewhere, there are important differences. Don’t use other documentation as a guideline for its use or behavior.
Here are two specific things to keep in mind about $Resource in the Lightning Component framework.
First, $Resource isn’t available until the Lightning Component framework is loaded on the client. Some very simple components that are composed of only markup can be rendered server-side, where $Resource isn’t available. To avoid this, when you create a new app, stub out a client-side controller to force components to be rendered on the client.
Second, if you’ve worked with the $Resource global variable, in Visualforce or elsewhere, you’ve also used the URLFOR() formula function to construct complete URLs to specific resources. There’s nothing similar to URLFOR() in the Lightning Component framework. Instead, use simple string concatenation, as illustrated in the preceding examples.