collections2和meteor-cfs-autoform來上傳和顯示圖像

我使用的是collections2和meteor-cfs-autoform的模式，並使用cfs：gridfs存儲適配器包上傳和顯示圖像，但無法在模板中顯示圖像。可以爲您請告訴我我在做什麼錯誤及其解決方案。collections2和meteor-cfs-autoform來上傳和顯示圖像

collections.js

Recipes = new Mongo.Collection('recipes'); 
Reviews = new Mongo.Collection('reviews'); 
RecipesImages = new FS.Collection("recipesImages", { 
    stores: [new FS.Store.GridFS("recipesImages")] 
}); 
RecipesImages.allow({ 
    insert: function(userId, doc) { 
     return true; 
    }, 
    update: function(userId, doc, fieldNames, modifier) { 
     return true; 
    }, 
    download: function(userId) { 
     return true; 
    }, 
    fetch: null 
}); 

Recipes.attachSchema(new SimpleSchema({ 
    name: { 
     type: String, 
     label: "Recipe Name", 
     max: 100 
    }, 

     ingredients: { 
      type: [Object], 
      minCount: 1 
     }, 

    "ingredients.$.name": { 
    type: String 
     }, 
    "ingredients.$.amount": { 
    type: String 
    }, 
    description: { 
     type: String, 
     label: "How to prepare ", 
    }, 
    time: { 
     type: Number, 
     label: "Time (Minutes)", 
    }, 
    image: { 
     type: String, 
     autoform: { 
      afFieldInput: { 
       type: "cfs-file", 
       collection: 'recipesImages', 
       label: 'Recipe Picture' 
      } 
     } 
    } 
}));

recipes.js

Template.recipes.helpers({ 
     'showRecipes':function(){ 
      return Recipes.find(); 
     }, 
     'images': function() { 
      return RecipesImages.findOne({_id:id}) ; 
     } 
    })

recipes.html

<template name="recipes"> 
    {{#each showRecipes}} 

       <div class=" col-md-4"> 
        <div class="panel panel-default mb " > 
         <div class="panel-image"> 
          <img src="{{this.url }}" class="panel-image-preview" /> 
         </div> 
         <div class="panel-body"> 
          <h4>{{name}}</h4> 
          <p>{{description}}</p> 
         </div> 
         <div class="panel-footer text-center" > 
          <p>its footer </p> 
         </div> 
        </div> 
       </div> 
    {{/each}} 
</template>

來源

2015-10-27 Waqar

你小鬼或cfs:ui？如果沒有，您應該包括它，以便您可以使用幫助器FS.GetFile。然後你可以使用這段代碼。

食譜模板

<template name="recipes"> 
    {{#each showRecipes}} 

     <div class=" col-md-4"> 
      <div class="panel panel-default mb " > 
       <div class="panel-image"> 

        {{#with FS.GetFile "recipesImages" image}} 
         <img src="{{url}}" class="panel-image-preview" /> 
        {{/with}} 

       </div> 
       <div class="panel-body"> 
        <h4>{{name}}</h4> 
        <p>{{description}}</p> 
         </div> 
         <div class="panel-footer text-center" > 
          <a href="{{pathFor 'show_recipe'}}"><span class="glyphicon glyphicon-open-file"></span></a> 
          <a href="#" ><span class="glyphicon glyphicon-time" style="vertical-align:middle"></span><small> {{time}}</small></a> 
          <a href="#"><span class="glyphicon glyphicon-heart likes" style="vertical-align:middle"></span><small>2 </small></a> 
          <a href="#"><span class="glyphicon glyphicon-share"></span></a> 
         </div> 
        </div> 
       </div> 
    {{/each}} 
</template>

食譜助手

Template.recipes.helpers({ 
    'showRecipes':function(){ 
     return Recipes.find(); 
    } 
});

這裏的鏈接到cfs:ui documentation

來源

2015-10-27 15:02:23

CFS：未添加UI和我現在又增加了。它仍然沒有工作。我是初學者和自學流星，我已經花了最後4天弄清楚如何顯示圖像，但仍然沒有成功。你可以看看我的源代碼，並請告訴我解決方案，因爲我現在認爲我是非常接近解決它。 https://github.com/soni1/foody @Lucas Blancas – Waqar

@waqar，我克隆了你的git項目並能解決這個問題。看到我上面更新的答案。重要的變化是{{#with FS.GetFile「recipesImages」image}}。請注意，我也刪除了recipe.images幫手，因爲這不再需要。 –

collections2和meteor-cfs-autoform來上傳和顯示圖像

回答

相關問題