Question

我有一个FS.collection，每个发布的项目保存一个图像。我有一个列出每个项目的模板，但每次上传带有图片的新项目时，最新上传的图片会替换每个项目的图片。

这是CSS：

.demo-card-square > .mdl-card__title {
  color: #fff;
  background: url('{{image.url store="images"}}') bottom right 15% no-repeat #46B6AC;
}

以下是该集合的声明：

Images = new FS.Collection("images", {
  stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});

这是项目助手。它应该获得每个项目的唯一photoID，然后在集合中找到图像。它似乎只对最近的图像有所作为：

Template.item.helpers({
  image: function () {
    console.log(this);
    return Images.findOne(this.photo._id); // Where Images is an FS.Collection instance
  }
});

我还检查了mongo shell，图片正在成功上传，所以我知道他们已经成功保存了。在帮助程序代码中是否需要更改任何内容才能使图像正确显示每个项目？项目的其他属性（例如其名称和描述）正确显示在其各自的模板上，但不显示在图像上。

Answer 1

更简单的方法是在样式标记中内联对图像的引用，这将避免css样式的扩散：

<div class="demo-card-square mdl-card mdl-shadow--2dp"
  style="background: url('{{image.url}}') store='images'">

Answer 2

原来问题是因为我正在设置特定CSS类的背景图像，如下所示：

    .demo-card-square > .mdl-card__title {
  color: #fff;
  background: url('{{image.url store="images"}}') bottom right 15% no-repeat #46B6AC;
}

因此，最近加载的图像会自然地将背景图像URL设置为最近的图像。我在这个CSS选择器上添加了一个ID，该ID对每个上传项的ID都是唯一的，然后将此ID作为属性添加到该类选择的实际html标记上。像所以：

  #{{_id}}.demo-card-square > .mdl-card__title {  //this line is not a comment, but SOverflow marks it as such.
    color: #fff;
    background:
      url('{{image.url store="images"}}') bottom right 15% no-repeat #46B6AC;
  }
  </style>

  <div class="demo-card-square mdl-card mdl-shadow--2dp" id="{{_id}}">

Meteor仅为集合中的所有项目检索一个图像

2 个答案: