---
schema_version: "1"
id: c2c6f1373772a92b795e6ea610039088f0d93915c81580a259057c45c99bf6b0
title: $ContentAsset
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/expr/expr-contentasset-value-provider.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/expr-contentasset-value-provider.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: e307e7deb03366774ab57652aa8ca4e676ccbb6ddbcc55a8381ad4e6c8d7b6ed
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

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

```html
<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

```nolang
<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

```nolang
<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

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

```

JavaScript (.js) Asset File with DeveloperName `testDisplayData`

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