Icons broken when deployment has prepend option set

[lordkada]

Icons (eg. marker-icon.png) are broken if the production deployment is served by a URL containing a path, like: http://mydomain.com/myapp.

I'm using ember-cli 2.8, ember-leaflet 3.0.2 and my ember-cli-build.js has: prepend: "//mydomain.com/myapp/".

Inspecting the rendered HTML, I have noticed that the path for that icon is just '/assets/images//marker-icon.png' (please note also the double slash //).

If I manually fix it by prepending my URL and by removing the double slash (--> //mydomain/myapp/assets/images/marker-icon.png), it works.

Is this a bug or am I missing something?

[miguelcobain]

Shouldn't you be using the rootUrl property? More info: http://emberjs.com/blog/2016/04/28/baseURL.html Make sure you're using version 3.0.1 or later. We added a feature to detect that property and use it for assets: https://github.com/miguelcobain/ember-leaflet/pull/105

[lordkada]

@miguelcobain thanks a lot for your super fast reply... :-D It totally makes sense, I will try it asap and let you know! Thx

[lordkada]

Hmmm.. it doesn't work in my context.. I try to explain a little more.

I have an nginx serving the index.html from https://mydomain. Then all my assets (images, js) are loaded through a cdn, ie: //mycdn/app (so all the leaflet images should be loaded too).

If I set rootURL (or baseURL) to be //mycdn/app I get errors like 'Failed to execute 'replaceState' on 'History': A history state object with URL...'. (It's true, it's not my root URL... it's just where I save my assets!!)

I looked through the changes due to #105. If I correctly understand the blog post, Instead of

L.Icon.Default.imagePath = '${ENV.rootURL || ENV.baseURL || '/'}assets/images/';

assets should be tied to the prepend attribute, translating to:

L.Icon.Default.imagePath =//mycdn/app/assets/images/;

Does it sound to you?

[miguelcobain]

@lordkada I see.

We also need to look at the prepend string ourselves.

/cc @indr

[lordkada]

Any evolution on this ticket? :-)

[lordkada]

In the meantime, I've solved this by

1. setting my ENV.prepend variable in the environment.js

   if (environment === 'production') {
   ENV.prepend = "//mycdn/app";
   }

2. referring it in my ember-cli-build.js

   var config = require('./config/environment')(process.env.EMBER_ENV || 'development');
   ...  
   var app = new EmberApp(defaults, {
   // Add options here    
   fingerprint: {
     prepend: config.prepend,
     ...

3. creating my own initializer to overwrite the image path:

import ENV from '../config/environment';
/* global L */

export function initialize(/* container, application */) {
  L.Icon.Default.imagePath =  `${ENV.prepend || '/'}assets/images`;
}

export default {
  name: 'leaflet-assets-cdn',
  initialize: initialize,
  after: 'leaflet-assets'
};

Hope it helps someone before your final solution ;-)

[jozefvaclavik]

I had to add assets/images/ with a tailing forward slash.

L.Icon.Default.imagePath =  `${ENV.prepend || '/'}assets/images/`;

[sumeetattree]

I had a similar query. Using this with ember-cli-deploy workflow. Server that serves (hosted on 3000) the ember html is different from the ember server (hosted on 4200). After the build has completed I can see that the icons provided by ember-leaflet have been dumped into dist/assets/images directory.

I have prepend enabled throughout the app. So these are fingerprinted properly as well. But the images within the <img> tag are not processed. Is it something that ember does by default? Or are these explicitly excluded from fingerprinting by you? Or are only the css files are processed for fingerprinting?

Is this something you would be willing to move into a css file so they are processed by the fingerprinting service?

IMO, if prepend is enabled throughout the app, these should just work seamlessly without having to fiddle with L.Icon.Default.imagePath