$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:

<aura:component>
    <img src="{!$ContentAsset.websiteImages + 'pathinarchive=images/logo.jpg'}" "alt="holiday wreath"/>
</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

<aura:component>
    <ltng:require styles="{!$ContentAsset.bookStyle}"/>

    <!-- "bookName" is defined in an asset file with DeveloperName of "bookStyle" -->
    <div id="bookTitle" class="bookName">
    </div>
</aura:component>

Aura component displays data from a testDisplayData JavaScript asset file:

Markup

<aura:component>
    <ltng:require scripts="{!$ContentAsset.testDisplayData}"
afterScriptsLoaded="{!c.displayData}"/>
...

    <aura:attribute name="TestData" type="String[]" ></aura:attribute>
        <div>
            <input type="text" id="sampleData" value ="{!v.TestData}" />
        </div>
...
</aura:component>

Controller

({
    displayData : function(component, event, helper) {
        var data = _datamap.getData();
        component.set("v.TestData", data);
    }
})

JavaScript (.js) Asset File with DeveloperName testDisplayData

window._datamap = (function() {
    var data = ["Agree", "Disagree", "Strongly Agree", "Strongly Disagree", "Not Applicable"];
    return {
        getData: function() {
            return data.join(", ");
        }
    };
}());