Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Component Composition
Component Body
Component Facets
Best Practices for Conditional Markup
Component Versioning
Using Expressions
Dynamic Output in Expressions
Conditional Expressions
Value Providers
$Browser
$Locale
$Resource
Expression Evaluation
Expression Operators Reference
Expression Functions Reference
Using Labels
Localization
Providing Component Documentation
Working with UI Components
Supporting Accessibility
Using Components
Communicating with Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

$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 Lightning components 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.
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.

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:

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 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.