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:
<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>
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()
});
}
});
}
$ 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:
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?
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.