+1
Answered

Images not showing after deploy

Foxy 2 years ago in Platform Emulator • updated by Todd 2 years ago 2

Seems images in my templates don't show after deploying.

They work fine if i run the application up in codeflow environment.

Can you help please?

Answer

+1
Answer
Under review

Could you please confirm if the issue with the images not showing is only seen when using the Platform Emulator and/or device? If so, then the issue relates to the way that the assets are referenced, and how they are stored inside the static resource in Salesforce.


It can be overcome believe by specifying the following in your app.js

$rootScope.resourcePath = window.RESOURCE_ROOT;<em>
</em>

This should be in the .run so that you have something like this;

// existing line
.run(['$ionicPlatform', 'NetworkService', 'AppRunStatusService', 'UserService', 'SyncService' , function($ionicPlatform, NetworkService, AppRunStatusService, UserService, SyncService) {

  // new line
  $rootScope.resourcePath = window.RESOURCE_ROOT;

  // existing lines
 $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
  ...
  ...
Then in your template files (like _login.html_) you can ref the images with the _resourcePath_ prefix, like this;


<img style="display: block; margin-left: auto; margin-right: auto;" src="{{$root.resourcePath}}img/my-image.png" height="auto" width="100%">

The background to this is that the relative path to the images is not enough, and that the absolute path to the assets is only known following the Deploy to the platform. The above means that the absolute path can be dynamically inserted at run-time.


+1
Answer
Under review

Could you please confirm if the issue with the images not showing is only seen when using the Platform Emulator and/or device? If so, then the issue relates to the way that the assets are referenced, and how they are stored inside the static resource in Salesforce.


It can be overcome believe by specifying the following in your app.js

$rootScope.resourcePath = window.RESOURCE_ROOT;<em>
</em>

This should be in the .run so that you have something like this;

// existing line
.run(['$ionicPlatform', 'NetworkService', 'AppRunStatusService', 'UserService', 'SyncService' , function($ionicPlatform, NetworkService, AppRunStatusService, UserService, SyncService) {

  // new line
  $rootScope.resourcePath = window.RESOURCE_ROOT;

  // existing lines
 $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
  ...
  ...
Then in your template files (like _login.html_) you can ref the images with the _resourcePath_ prefix, like this;


<img style="display: block; margin-left: auto; margin-right: auto;" src="{{$root.resourcePath}}img/my-image.png" height="auto" width="100%">

The background to this is that the relative path to the images is not enough, and that the absolute path to the assets is only known following the Deploy to the platform. The above means that the absolute path can be dynamically inserted at run-time.