$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