Reference static resource URL in Lightning Controller.js

Question

I'm trying to reference a file in my Static References in a Lightning component Controller.js file.

In my component file I would do this using the following pattern: src="{!$Resource.FutureStatePortalV1 + '/assets/images/SVG/preview.svg'}". This renders the correct path to the static resources file in the Salesforce site.

I attempted this same thing in controller.js:

previewIcon.src = "{!$Resource.FutureStatePortalV1 + '/assets/images/SVG/preview-hide.svg'}";

However, this just renders a string value of src="{!$Resource.FutureStatePortalV1 + '/assets/images/SVG/preview-hide.svg'}"

Is there a way to do this from the Controller.js?

Answer 1

Please refer to the Lightning Components Developer Guide on how to use static resource in Lightning Component and controller.

Using $Resource in JavaScript

To obtain a reference to a static resource in JavaScript code, use $A.get('$Resource.resourceName').

resourceName is the Name of the static resource. In a managed packaged, the resource name must include the package namespace prefix, such as $Resource.yourNamespace__resourceName. For a stand-alone static resource, such as an individual graphic or script, that’s all you need. To reference an item within an archive static resource, add the rest of the path to the item using string concatenation. For example:

({
    profileUrl: function(component) {
        var profUrl = $A.get('$Resource.SLDSv2') + '/assets/images/avatar1.jpg';
        alert("Profile URL: " + profUrl);
    }
})