Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

$Resource

The $Resource global value provider lets you reference images, style sheets, and JavaScript code you’ve uploaded in static resources.

Using $Resource lets you reference assets by name, without worrying about the gory details of URLs or file paths. You can use $Resource in Aura component markup and within JavaScript controller and helper code.

Using $Resource in Component Markup

To reference a specific resource in component markup, use $Resource.resourceName within an expression. resourceName is the Name of the static resource. In a managed package, the resource name must include the package namespace prefix, such as $Resource.yourNamespace__resourceName. For a stand-alone static resource, such as an individual graphic or script, you only need the name of the resource. For example, if you uploaded myScript.js and set the Name to myScript, reference it as $Resource.myScript. To reference an item within an archive static resource, add the rest of the path to the item using string concatenation. Here are a few examples.

1<aura:component>
2    <!-- Stand-alone static resources -->
3    <img src="{!$Resource.generic_profile_svg}"/>
4    <img src="{!$Resource.yourNamespace__generic_profile_svg}"/>
5
6    <!-- Asset from an archive static resource -->
7    <img src="{!$Resource.yourGraphics + '/images/logo.jpg'}"/>
8    <img src="{!$Resource.yourNamespace__yourGraphics + '/images/logo.jpg'}"/>
9</aura:component>

Include CSS style sheets or JavaScript libraries into a component using the <ltng:require> tag. For example:

1<aura:component>
2  <ltng:require 
3    styles="{!$Resource.jsLibraries  + '/styles/jsMyStyles.css'}"
4    scripts="{!$Resource.jsLibraries + '/jsLibOne.js'}"
5    afterScriptsLoaded="{!c.scriptsLoaded}" />
6</aura:component>

Due to a quirk in the way $Resource is parsed in expressions, use the join operator to include multiple $Resource references in a single attribute. For example, if you have more than one JavaScript library to include into a component the scripts attribute should be something like the following.

1scripts="{!join(',', 
2    $Resource.jsLibraries + '/jsLibOne.js', 
3    $Resource.jsLibraries + '/jsLibTwo.js')}"

Note

Using $Resource in JavaScript

To obtain a reference to a static resource in JavaScript code, use $A.get('$Resource.resourceName').

resourceName is the Name of the static resource. In a managed package, the resource name must include the package namespace prefix, such as $Resource.yourNamespace__resourceName. For a stand-alone static resource, such as an individual graphic or script, you only need the name of the resource. For example, if you uploaded myScript.js and set the Name to myScript, reference it as $Resource.myScript. To reference an item within an archive static resource, add the rest of the path to the item using string concatenation. For example:

1({
2    profileUrl: function(component) {
3        var profUrl = $A.get('$Resource.yourGraphics') + '/images/avatar1.jpg';
4        alert("Profile URL: " + profUrl);
5    }
6})

Static resources referenced in JavaScript aren’t automatically added to packages. If your JavaScript depends on a resource that isn’t referenced in component markup, add it manually to any packages the JavaScript code is included in.

Note

$Resource Considerations

Global value providers in the Aura Components programming model 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 Aura Components programming model.

First, $Resource isn’t available until the Aura Components programming model 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 Aura Components programming model. Instead, use simple string concatenation, as illustrated in the preceding examples.

Lightning Aura Components Developer Guide

$Resource

Using $Resource in Component Markup

Using $Resource in JavaScript

$Resource Considerations

See Also