Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Using Expressions
Dynamic Output in Expressions
Conditional Expressions
Data Binding Between Components
Value Providers
$Browser
$ContentAsset
$Locale
$Resource
Expression Evaluation
Expression Operators Reference
Expression Functions Reference
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Base Lightning Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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

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 displays data from a testDisplayData JavaScript asset file:

Markup
Controller
JavaScript (.js) Asset File with DeveloperName testDisplayData