Tag Archives: Static Resources

Displaying Static Resources Image in Lightning Component

To reference a specific resource in component markup, we can use $Resource.resourceName within an expression. resourceName is the Name of the static resource. In a managed packaged, the resource name must include the package namespace prefix, like $Resource.yourNamespace__resourceName.

Sample Code:

<aura:component>
    <!-- Stand-alone static resources image file-->
    <img src="{!$Resource.resourceName}"/>
    <!-- Stand-alone static resources image file with Namespace-->
    <img src="{!$Resource.yourNamespace__resourceName}"/>
    
    <!-- Asset from an archive static resource image file-->
    <img src="{!$Resource.resourceName + '/assets/images/logo.png'}"/>
    <!-- Asset from an archive static resource image file with Namespace-->
    <img src="{!$Resource.yourNamespace__resourceName + '/assets/images/logo.png'}"/>
</aura:component>