Meteor Iron Router : Loading public resources in inner routes

Question

In my meteor application I have a nested route

  this.route('assemble', { 
    path: '/assemble',
    title: 'Assemble',
    parent: 'home',
    controller: 'MainLayoutController'
  });  

  this.route('bottypelist', { 
    path: '/assemble/bottypelist',
    title: 'BotType - List',
    parent: 'assemble',
    controller: 'MainLayoutController',
    waitOn: function(){
      return Meteor.subscribe('myBotTypes');
    }
  });    

The layout controller loads a logobar on the top. The layout template is

<template name="mainLayout">

    <div class="logobar"  style="background-color:#FFF">
        {{> logobar}}
    </div>

    <div class="top">
        {{> yield region="header"}}
    </div>

    <div class="">
        {{> yield}}
    </div>

    <div class="bottom">
        {{> yield region="footer"}}
    </div>

</template>

The logobar template has a logo image.

<template name="logobar">

<div style="width:100%; min-width:100%; background-color:black; position:fixed; z-index:1029;">
    <div class="container-fluid">
        <div class="row" style="padding-right:0px; margin-right:0px">

            <div class="com-md-4">
                <a href="{{pathFor 'home'}}"> <img src="images/holmes_logo.png" width="280px" height="70px"></a>
            </div>
        </div>
    </div>
</div>

</template>

But this image is not loading in the application. The logo link is coming as http://localhost:3000/assemble/images/holmes_logo.png

This link is working fine http://localhost:3000/images/holmes_logo.png

So for the outer routes, the image is getting loaded but not for the inner routes.

I'm using this package for breadcrumbs monbro:iron-router-breadcrumb

Answer 1

You need to use an absolute URL for referencing your image :

<img src="/images/holmes_logo.png">

Notice the slash at the beginning of the path ?