Working with local images – those that are bundled with our application code – can sometimes cause confusion for developers; This article covers how local “bundled” images can be used with a MobileCaddy application.
Versions
- Based off starter-app shell-ionic / shell-ionic-sidemenu v1
- Requires MC_Resource v1.1.0
Why Bundle Images in your App?
To enrich an application’s UI a common route is to use graphics as part of the application, as opposed to those supplied within the data pulled from Salesforce or served from the OS’s file system. Doing this as part of a Hybrid Remote project (of which all MobileCaddy applications are) can cause difficulties in correctly referencing the images. This difficulty occurs partly due to the fact that the bundled app’s JS, HTML, and other assets are served from within a Salesforce Static Resource, and the root the dynamic “web application” part of our MobileCaddy app is actually a Visualforce page. We also need to take into account that the absolute path to a static resource is not known until the application has been deployed to Salesforce, i.e. following our apps build and packaging.
How To
To get these “bundled images” to be referenced correctly when the apps are run on real devices, as well as in the Platform Emulator and within CodeFlow, there is a window attribute declared called RESOURCE_ROOT. When the application runs, this is set to the absolute path of the static resource that contains the applications assets (JS, HTML, CSS, images, etc).
With this value defined it can be used within our controllers, and AngularJS templates, to correctly reference our images.
Examples
In the controller for our view, we make this value available within it’s scope.
|
1 2 3 |
vm.resourcePath = window.RESOURCE_ROOT |
And lets say that our project has an image called “my-image.png” in a www/images directory. We can reference this in our template as follows;
|
1 2 3 |
<img src="{{::vm.resourcePath}}images/my-image.png"> |
Note we have used Angular’s one-time-binding syntax “::”
Troubleshooting
If your images are not showing correctly you can use your browsers developer tools to interrogate the resolved path for the images. This should be done whilst the app is running through the Platform Emulator or through remote debugging with the application running on a real device.
Note: this should not be done whilst running in CodeFlow as the app is not being served from Salesforce’s static resource system in this environment.