I am giving my image path. I am following this link.

<img class="img-responsive" src="{!$Resource.Kola + '/assets/Koala/Koala.JPEG'}"  />

here Kola---->My static resource foldername Koala->>>>>My foldername Koala.jpege----My image name

The output looks like this:

enter image description here


1 Answer 1


if you are correctly referring the image(Koala.JPEG) which resides inside Koala(folder) which is inturn is inside assests(folder), then i think below statement might me the reason for the image loading issue:

Resource isn’t available until the Lightning Component framework is loaded on the client. Some very simple components that are composed of only markup can be rendered server-side, where $Resource isn’t available. To avoid this, when you create a new app, stub out a client-side controller to force components to be rendered on the client.

As mentioned above, if your component contains only markups which uses $Resource, then you need to create controller file for the component to force components to be rendered on the client.

test.cmp:(this won't work if there is no controller)

<aura:component >
 <img src="{!$Resource.SLDS100 + '/assets/images/avatar1.jpg'}" width="100" height="100"/>

If you go head and create a controller for the above component, then image would render properly

testController.js(dummy controller)

    myAction : function(component, event, helper) {


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .