How to retrieve Image in Jade from Meteor FS Collection

Question

I am working on a existing Meteor project. I have a Schema as shown below,

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/*'],
    },
  },
});
.........
)}

And I found Insert code as below

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

Now My requirement is, I wanted to display the above stored image in the below Jade Template. I am finding difficulties in rendering the same.

MyProfile.tpl.jade (Jade Template)

 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}}

I have tried the below but did not work. MyProfile.js

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

Can someone assist me on how to display the image on Jade Template ?

Answer 1

I have resolved this by changing template as shown below.

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