iron:router 的 Meteor 应用程序中的图片错误

Question

我在使用 iron:router 的 Meteor 应用程序中遇到了一个奇怪的问题。当我在带有参数的页面上路由并路由回简单页面时，图片 (<img/>) 不再显示。

我也会粘贴下面的代码，但如果你想走得更快，我把它放在 github 中：https://github.com/Erdou/meteor-iron-router-picture-bug

重现：

点击新建link
点击link新生成的
点击 返回主界面 link
如您所见，只有远程图片显示

代码：

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()
            });
        }
    });
}

将图片复制到 public/ 文件夹

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

如你所见，本地图片坏了，而远程图片还在：

奇怪的是，当你查看带有Firebug的图片标签时，一切似乎都很正常（Firebug甚至向你展示了图片）。

有人可以告诉我如何解决这个问题吗？

Answer 1

路由非相关图像可能存在一些问题，您应该切换

<img src="Col_Meteorites.png"/>

到

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

因此它将始终指向网站的根目录。

iron:router 的 Meteor 应用程序中的图片错误

Picture bug in a Meteor application with iron:router

image

meteor

iron-router

client/templates.html

app.js

将图片复制到 public/ 文件夹