imagemeteoriron-router

Picture bug in a Meteor application with iron:router


I'm having a weird issue in a Meteor application using iron:router. When I route on a page with a parameter and I route back to the simple page, the picture (<img/>) is not showing again.

I will also paste the code below, but if you want to go faster I put it in a github: https://github.com/Erdou/meteor-iron-router-picture-bug

To reproduce :

The code:

client/templates.html

<template name="appBody">
  <a href="{{pathFor 'list'}}">Back to main</a>
  <div>
    {{> yield}}
  </div>
</template>

<template name="list">
  <div><img src="http://cdn.bulbagarden.net/upload/3/3a/Col_Meteorites.png"/></div>
  <div><img src="Col_Meteorites.png"/></div>
  <a class="js-add" href="#">New</a>
  <ul>
    {{#each this}}
    <li>
      <a href="{{pathFor 'item' _id}}">{{createdAt.toDateString}}</a>
    </li>
    {{/each}}
  </ul>
</template>

<template name="item">
  {{createdAt.toDateString}}
</template>

app.js

Items = new Mongo.Collection("items");

Router.configure({
    layoutTemplate: 'appBody'
});


Router.route('item', {
    path: '/item/:_id',
    data: function () {
        return Items.findOne(this.params._id);
    }
});

Router.route('/', {
    name: 'list',
    data: function() {
        return Items.find({}, {sort: {createdAt: -1}});
    }
});

if (Meteor.isClient) {
    Template.list.events({
        'click .js-add': function(event) {
            event.preventDefault();
            Items.insert({
                createdAt: new Date()
            });
        }
    });
}

Make a copy of the picture in the public/ folder

$ mkdir public
$ curl "http://cdn.bulbagarden.net/upload/3/3a/Col_Meteorites.png" -o Col_Meteorites.png

As you can see, the local picture is broken while the remote one is still working:

Firefox screenshot of the bug

The weird thing is that when you look at the picture tag with Firebug, everything seems normal (Firebug even shows you the picture).

Can somebody tell me how to fix this please?


Solution

  • There is probably some issue with routing non-relative images, you should switch

    <img src="Col_Meteorites.png"/>

    to

    <img src="/Col_Meteorites.png"/>

    so it will always point to root of the site.