Displaying Static Resources Image in Lightning Component

Biswajeet   May 4, 2017   2 Comments on 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>

  • Jade

    Hi Biswajeet,
    I have a requirement to display images which are stored in static resources but i cannot understand where and how would i query for the static resource and iterate it in my component, can u help me out with an example…

    • Sorry for late reply. You don’t have to query it, just mentioned the name in resource as mentioned above.