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.
Include CSS style sheets or JavaScript
libraries into a component using the <ltng:require> tag. For
example:
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.
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:
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.
$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.
j