如何显示正确的个人资料图片 Meteorjs [英] How to show correct profile picture Meteorjs
问题描述
我正在使用 CollectionFs 上传个人资料图片.图片上传保存成功.我可以为一个用户插入和显示图像，但是问题是:对于多个用户，当一个用户访问其他用户的个人资料时，他看到的是自己的照片，而不是个人资料所有者的照片！
我理解我的辅助函数中的 mongo 查询导致了问题，但无论我尝试了多少This._id"，都无法让它正常工作.
这里是javaScript
Router.route('show',{路径:'/list/:_id',数据:函数(){return Main_database.findOne({_id: this.params._id});}});Template.upload.events({'改变#exampleInput':函数(事件，模板){var file = $('#exampleInput').get(0).files[0];fsFile = new FS.File(file);fsFile.metadata = {ownerId:Meteor.userId()}Images.insert(fsFile,function(err,result){如果(！错误){console.log("插入的新图片")}})}});Template.profile.helpers({profilePic: 函数 () {return Images.find({'metadata.ownerId':Meteor.userId()});}});这是html:
<div class="容器"><div class="row"><输入类型=文件"id="示例输入"><模板名称=个人资料">{{#每个个人资料图片}}<img src="{{this.url}}"高度="400" 宽度="400"class="img-circle">{{/每个}}</template>
谢谢
B.s :按照给出的答案，我在 profile.xxx 字段中附上了照片.但它仍然显示错误的图片.mongo查询仍然显示错误图片.
这是代码，
Router.route('show',{路径:'/list/:_id',数据:函数(){return Main_database.findOne({_id: this.params._id});}});Template.upload.events({'改变#exampleInput':函数(事件，模板){var file = $('#exampleInput').get(0).files[0];newFile = new FS.File(file);newFile.metadata = {'ownerId':Meteor.userId()};Images.insert(newFile,function(err,result){如果(！错误){控制台日志(结果._id)；Meteor.users.update(Meteor.userId(),{$set:{'profile.profilePic':result._id}});}});}})//.....................用户照片.............Template.profile.helpers({个人资料图片:函数(){return Images.find({'_id':Meteor.user().profile.profilePic});}});终于能够做到了.作为初学者，我一直坚持上传图片，然后几天来向我的用户展示它们.几乎所有的方法都试过了，都没有用.到处问，没有一个答案奏效.最后，来自 cosio55:autoform-cloudinary 的一个简单的包就像魔法一样工作！！！看看我在使用这些包时遇到的问题:
1.cfs:ui
{{#with FS.GetFile "images" selectedImageId}}//图片地址{{/with}}
问题:
这是我无法获得 selectedImageId .
2.cfs:gridfs
问题:
grid fs 将图像存储在单独的集合中.我的用户列表使用铁路由器显示另一个集合的用户列表.图像正在上传到图像集合中.但是为了我一生的挚爱，我无法正确地展示它们.每个用户看到的是他自己的照片，而不是个人资料所有者的照片.由于错误的 mongo 查询而发生，但我无法获得正确的查询.尝试在 profile.profilePicture 中附加照片，但仍然存在错误图像的问题.
我不得不将上传的照片放在单独的页面中，而不是放在自动表单中.
3.lepozepo:阴天问题:图片上传正常.但是在获取/存储图像 url 时遇到问题.无法获取
我不得不将上传的照片放在单独的页面中，而不是放在自动表单中.
public_id ?????在那里迷路了.
4.yogiben 的自动成型文件
与 GridFs 相同的问题.
终于有了这个 cosio55:autoform-cloudinary 包，我只花了一分钟就搞清楚了.一分钟 vs 几天其他大牌包！！！！
:笑脸:
<代码>
只需在 img 源代码中添加 {{image} 就可以了.图片 url 存储在同一个集合中，自动表单存储所有内容.
干杯伙伴.
I am using CollectionFs to Upload profile pictures. Uploading and storing the image is successful. I can insert and show the image alright for one user but the problem is: For multiple users, when a user visit other users profiles, He sees his own picture rather than seeing the profile owner's picture!
I understand its the mongo query I have in my helper function thats causing the issue but can't just get it to work no matter how many "This._id" I Try.
Here is the javaScript
Router.route('show',{
path:'/list/:_id',
data: function(){
return Main_database.findOne({_id: this.params._id});
}
});
Template.upload.events({
'change #exampleInput':function(event, template){
var file = $('#exampleInput').get(0).files[0];
fsFile = new FS.File(file);
fsFile.metadata = {ownerId:Meteor.userId()}
Images.insert(fsFile,function(err,result){
if(!err){
console.log("New images inserted")
}
})
}
});
Template.profile.helpers({
profilePic: function () {
return Images.find({'metadata.ownerId':Meteor.userId()});
}
});
And here is the html:
<template name="upload">
<div class="container">
<div class="row">
<input type="file"
id="exampleInput">
</div>
</div>
</template>
<template name="profile">
{{#each profilePic}}
<img src="{{this.url}}"
height="400" width="400"
class="img-circle">
{{/each}}
</template>
Thanks
B.s : after following the answer given, I attached the photo in the profile.xxx field. But its still showing the wrong picture. The mongo query is still showing the wrong picture.
here is the code,
Router.route('show',{
path:'/list/:_id',
data: function(){
return Main_database.findOne({_id: this.params._id});
}
});
Template.upload.events({
'change #exampleInput':function(event, template){
var file = $('#exampleInput').get(0).files[0];
newFile = new FS.File(file);
newFile.metadata = {'ownerId':Meteor.userId()};
Images.insert(newFile,function(err,result){
if(!err){
console.log(result._id);
Meteor.users.update(Meteor.userId(),{
$set: {
'profile.profilePic': result._id
}
});
}
});
}
})
// .....................profile pic.............
Template.profile.helpers({
profilePicture: function () {
return Images.find({'_id':Meteor.user().profile.profilePic});
}
});
Finally was able to do it. Being a beginner, I was stuck at uploading images and then showing them for my users for days. Tried almost each method out there, none worked. asked everywhere, none of the answer worked. Finally , a dead simple package from cosio55:autoform-cloudinary worked like magic!!! Just take a look at the problems I faced while using these packages:
1. cfs:ui
{{#with FS.GetFile "images" selectedImageId}}
// image url
{{/with}}
problem:
with this was I couldn't get the selectedImageId .
2. cfs:gridfs
problem :
grid fs stores image in a separate collection. My user list uses iron router to show the user list form another collection. Image was getting uploaded into the images collection. But For the love of my life, I couldn't show them correctly. Each user was seeing his own picture rather than the profile owner's picture. happened because of a wrong mongo query but I couldn't get the right query. Tried attaching the photo in the profile.profilePicture, but same problem of wrong image stayed.
And I had to put the upload photo in a separate page and NOT in the autoform.
3. lepozepo:cloudinary Problem: Image uploaded fine. But had problem getting /storing the image url. Couldn't get
And I had to put the upload photo in a separate page and NOT in the autoform.
public_id ????? Got lost there.
4. autoform-file by yogiben
same problem as GridFs.
Finally with this cosio55:autoform-cloudinarypackage took me just a minute to figure things out. A minute vs days of other big name packages!!!!
:smiley:
<div> <img src=" {{image}}" alt=""> Image </div>
just add {{image} in the img source and thats it. The image url is stored in the same collection autoform stores everything.
Cheers Mates.
这篇关于如何显示正确的个人资料图片 Meteorjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
