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.

$ContentAsset

The $ContentAsset global value provider lets you reference images, style sheets, and JavaScript used as asset files in your Lightning components.

Reference $ContentAsset asset files by name instead of using cumbersome file paths or URLs. $ContentAsset provides sharing, versioning, and access control for all asset files, as well as options for mobile optimization and resizing of image files. You can use $ContentAsset in Lightning components markup and within JavaScript controller and helper code.

Using $ContentAsset in Component Markup

To reference a specific asset file in component markup, use $ContentAsset.yourNamespace__assetName. Orgs without a namespace can use $ContentAsset.assetDeveloperName. Use this syntax regardless of whether an asset is for authenticated or unauthenticated sessions. To reference a content asset within an archive, add pathinarchive as a parameter appended to the basic syntax: $ContentAsset.yourNamespace__assetName + 'pathinarchive=images/sampleImage.jpg'.

Here are a few examples.

Aura component referencing an image in an archive asset file:

1<aura:component>
2    <img src="{!$ContentAsset.websiteImages + 'pathinarchive=images/logo.jpg'}" "alt="holiday wreath"/>
3</aura:component>

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

Aura component using an asset file to style a div element:

Markup

1<aura:component>
2    <ltng:require styles="{!$ContentAsset.bookStyle}"/>
3
4    <!-- "bookName" is defined in an asset file with DeveloperName of "bookStyle" -->
5    <div id="bookTitle" class="bookName">
6    </div>
7</aura:component>

Aura component displays data from a testDisplayData JavaScript asset file:

Markup

1<aura:component>
2    <ltng:require scripts="{!$ContentAsset.testDisplayData}"
3afterScriptsLoaded="{!c.displayData}"/>
4...
5
6    <aura:attribute name="TestData" type="String[]" ></aura:attribute>
7        <div>
8            <input type="text" id="sampleData" value ="{!v.TestData}" />
9        </div>
10...
11</aura:component>

Controller

1({
2    displayData : function(component, event, helper) {
3        var data = _datamap.getData();
4        component.set("v.TestData", data);
5    }
6})

JavaScript (.js) Asset File with DeveloperName testDisplayData

1window._datamap = (function() {
2    var data = ["Agree", "Disagree", "Strongly Agree", "Strongly Disagree", "Not Applicable"];
3    return {
4        getData: function() {
5            return data.join(", ");
6        }
7    };
8}());

Lightning Aura Components Developer Guide

$ContentAsset

Using $ContentAsset in Component Markup