$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 packaged, 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, that’s all you need. 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.SLDSv2 + '/assets/images/avatar1.jpg'}"/>
8    <img src="{!$Resource.yourNamespace__SLDSv2 + '/assets/images/avatar1.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.SLDSv2 + '/assets/styles/lightning-design-system-ltng.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 packaged, 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, that’s all you need. 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.SLDSv2') + '/assets/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