Display images in meteor using blaze

help
1

Hello, in my web app the user can upload posts with images, title, and story. I can display the the title, story and username but i can’t display the images of each post. Here is a part of the code which i retrieve and display the results:

images.js

Template.postsList.helpers({
  images: function(){

    var result;
   
    result = Post.find({}, {sort: {created: -1}})
    return result;
  }
});

imageInfo.html

<template name="imageInfo">
  <div class="imageInfo">
    <div class="panel panel-default">
      <img src="{{url}}"/>
      <div class="panel-heading">
        <h4 class="panel-tittle">{{title}} <span class="pull-right">Posted by: {{username}} {{getUsername2 _id}}</span></h4>
        <a class="follow-link">Follow</a>
      </div>
      <div class="panel-body">
        {{content}}
      </div>
    </div>
  </div>
</template>

mathods.js

Meteor.methods({
  addImageInfo: function(imageId, title, story){
    if(!Meteor.userId()){
      throw new Meteor.Error('Not Authorized');
    }

    var username = Meteor.user().username;
    //var username2 = Meteor.user().profile.name;
    Post.insert({
      title: title,
      content: story,
      imageId: imageId,
      imageUrl: '/cfs/files/Images'+imageId,
      userId: Meteor.userId(),
      username: username,
      username2: Meteor.user().profile.name,
      createdAt: new Date()
    });
  }

social-network.js

Post = new Mongo.Collection('post');

if(Meteor.isClient) {
  Template.postsList.helpers({
    posts: function(){
      return Post.find();
    }
  })
}

Images = new FS.Collection('Images', {
  stores: [new FS.Store.GridFS('Images')],
  filter: {
    allow: {
      contentTypes: ['image/*']
    },
    onInvalid: function(message) {
      FlashMessage.sendError(message);
    }
  }
});


Images.allow({
  insert:function(){return true;},
  update:function(){return true;},
  download:function(){return true;}
});
2

Is the /cfs folder under the /public folder in your directory structure, because that’s where Blaze goes looking for images by default. If they at the same level in your directory structure, you’ll need to put a ../ before the url in the src field of the img tag. (I assume here that the images are saving correctly in the /cfs folder.)

3

If i use: Images.find({}, {sort:{uploadedAt: -1}}); and
<img src="{{url}}" /> i can show the images to the user but in this way the images will be displayed separately from the rest of the post. I want each image with its title and the story together. That’s why i tried to use the Post.find({}, {sort: {created: -1}}) but it doesn’t work.

4

I think the way you’ve set this up, you’ll need to do a second query.

Get the image id from your Post.find() query, then query your image from the Images collection using that ID, and use the info you get to put it in the post or card.

The other solution is to store the image in base64 in the Post collection, and grab it directly.

5

It would appear all that’s wrong is this typo. Try changing this to:

6

Thanks for the reply. I used this but it didn’t work. If i use Images.find({}, {sort: {created: -1}}) and the <img src="{{url}}"/> it works fine, but in my case i can’t use that because i want to click on a username and filter the posts based on that username, so i have to use Post.find({username: Session.get('username')}, {sort:{uploadedAt: -1}}); because each time i make a post i store the username of that user. In this way i can show the title, the user and the story but not the images. I don’t know what i am doing wrong.

7

I don’t think you’re showing us all the relevant information.

You have a helper for a template called postsList, and you have shown a template called imageInfo.

Nowhere do I see the postsList template, nor do I see the helper for the imageInfo template.

8

imageInfo.html:

<template name="imageInfo">
  <div class="imageInfo">
    <div class="panel panel-default">
    
  <img src="{{imageUrl}}"/>
      <div class="panel-heading">
        <h4 class="panel-tittle">{{getTitle _id}} <span class="pull-right">Posted by: {{getUsername _id}} </span></h4>
        <a class="follow-link">Follow</a>
      </div>
      <div class="panel-body">
        {{getStory _id}}
      </div>
    </div>
  </div>
</template>

postsList.html

<template name="postsList">
  {{#each images}}
      {{> image}}
      {{> imageInfo}}
    
      <hr />
  {{/each}}

</template>