# $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(", ");
        }
    };
}());
```