如何从 Meteor FS 集合中检索 Jade 中的图像答案

【问题标题】：How to retrieve Image in Jade from Meteor FS Collection如何从 Meteor FS 集合中检索 Jade 中的图像
【发布时间】：2020-04-06 17:24:18
【问题描述】：

我正在处理现有的 Meteor 项目。我有一个如下图所示的架构，

Activities.schema = new SimpleSchema({
  title: {
    type: String,
    label: 'Title',
    index: 1,
  },

export const ActivitiesImages = new FS.Collection('activitiesImages', {
  stores: [
    new FS.Store.GridFS('homeActivitiesImages', { transformWrite: homeActivityImage }),
    new FS.Store.GridFS('origActivitiesImages', {}),
  ],
  filter: {
    maxSize: 1024 * 1024 * 5,
    allow: {
      contentTypes: ['image/*'],
    },
  },
});
.........
)}

我发现插入代码如下

 const insertObj = {
        title,
        description,
        type: [type],
        divisions: [],
        clubType,
        createdBy,
        privateType,
      };

      if (image) {
        insertObj.image = ActivitiesImages.insert(image);
      }

      Meteor.call('v1/insertActivity', insertObj, (error) => {
        if (error) {
          sAlert.error(error.message);
        } else {
          sAlert.success('Activity added');
          $('.activity-modal').modal('hide');
        }
      });

现在我的要求是，我想在下面的翡翠模板中显示上面存储的图像。我发现渲染相同的困难。

MyProfile.tpl.jade（翡翠模板）

 each activity in fiveStarActivities
                          .slider__item
                            .ui.segment
                                .ui.vertical.segment
                                    h3.ui.header.center.aligned {{activity.title}}
                                    .ui.list
                                        .item
                                            img(
                                                src="{{HERE I WANT TO DISPLAY IMAGE}}"
                                                alt="image description"
                                            ).ui.fluid.rounded.image
                                        .item     
                                            .ui.vertical.segment.big-card__btn-src
                                                button.ui.mini.grey.basic.button {{activity.title}}
                                        .item    
                                            p {{activity.description}}

我尝试了以下方法，但没有成功。 MyProfile.js

    activityImage(activity) {
        return ActivitiesImages.findOne({ _id: activity.image._id });
    },

有人可以帮助我如何在 Jade Template 上显示图像吗？

【问题讨论】：

标签： javascript meteor

【解决方案1】：

我已经通过更改模板解决了这个问题，如下所示。

MyProfile.tpl.jade

each activity in fiveStarActivities
      .slider__item
        .ui.segment
            .ui.vertical.segment
                h3.ui.header.center.aligned {{activity.title}}
                .ui.list
                    if activityImage activity
                      with activityImage activity
                        .item
                            img(
                                src="{{this.url store='homeActivitiesImages'}}"
                                alt="image description"
                            ).ui.fluid.rounded.image.medium

MyProfile.js

ActivitiesImages.findOne({ _id: activity.image._id });

【讨论】：