Question

我正在使用Meteor制作一个问答网络应用程序。我希望用户上传他们的图像。但是我无法理解GridFS，所以我避免它。为了克服这个问题，我正在为每个用户创建一个配置文件它存储了他们的描述，名称和他们的个人资料图片的'image_url'，即我要求用户为他们的图像添加网址，这些图片放在img src中以显示他们的个人资料图片。在本地服务器中，它工作正常，显示每个用户的图像。

这是common.js。

我将src和其他字段保留为空白，可以在创建个人资料页面中填写

Template.register.events({
    'submit form': function(event){
        event.preventDefault();
        var username = event.target.username.value;
        var password = event.target.password.value;
        Accounts.createUser({
    username: username,
    password: password,

}, function(error){
    if(error){
        alert(error.reason);
        event.target.password.value=''; // Output error if registration fails
    } else {
        Profile.insert({
        name:'',
        hobbies:'',
        description:'',
        currentUser:Meteor.userId(),
        src:'',
        followers:0,
        following:0,
        followedBy:[],
        followingTo:[]
        });

        Router.go("createProfile"); // Redirect user if registration succeeds
    }
});

在此之后，用户被定向到创建个人资料页面，在那里他/她被问及他/她的描述和个人资料图片网址，并且数据库中的用户个人资料被更新。

Template.createProfile.events({
        'click button':function(event){
        event.preventDefault();
        var name=document.getElementById('name').value;
        var hobbies=document.getElementById('hobbies').value;
        var description=document.getElementById('description').value;
        var src=document.getElementById('src').value;
        var currentUser=Meteor.userId();
        Profile.update({ _id: this._id },{$set:{name:name}});
        Profile.update({ _id: this._id },{$set:{hobbies:hobbies}});
        Profile.update({ _id: this._id },{$set:{description:description}});
        Profile.update({ _id: this._id },{$set:{src:src}});
        Router.go('posts');

    }
});

这是router.js

Router.route('/createProfile', {
    template: 'createProfile',
    name:'createProfile',
    data: function(){

        return Profile.findOne({ currentUser: Meteor.userId() });

    }
});

Router.route('/users'); //used helpers profile helper to display the list of every user with their links to profile page

Router.route('/user/:_id', {
    template: 'profilePage',
    name:'profilePage',
    data: function(){
        var currentProfile = this.params._id;
        return Profile.findOne({ _id: currentProfile });
    }
});

这是HTML

<template name='users'>//users is displaying the links to every user profile
<div class='container'>
{{#each profile}}
<div class='col-lg-6'>
<a href="{{pathFor route='profilePage'}}"><h3>{{name}}</h3>
<img src='{{src}}' class='img-responsive img-circle pull-left' height='50' width='50'/></a>
</div>
{{/each}}
</div>
</template>

这是每个用户的个人资料页面 -

<template name='profilePage'>

<h2 class='media-heading'> Profile</h2>
<div class='well'>

<img src='{{src}}' class='img-responsive img-circle pull-left' id='profileImage' height='50' width='50'/>
Name:{{name}}

<br>

Hobbies:{{hobbies}}

<br>

Description:{{description}}

<br>

<a href='{{pathFor route="followers"}}'>Followers:{{followers}}</a>

<br>

<a href='{{pathFor route="following"}}'>Following:{{following}}</a>
<br>
<button id={{followColor}} class='btn btn-default glyphicon glyphicon-eye-open' {{disabled}}>{{followOrfollowing}}</button>
<br>

</div>
<br>




<hr/>
</template>

此处{{src}}返回用户提供的image_url。

我的问题是，如果我的网络应用程序联机并且此方法是否正确，此方法是否有效？

Answer 1

简答：是的。

看到你的帮助方法确保它正确完成会有所帮助，但如果它正常渲染，那么我认为你做得对。您只是遇到了用户提交错误网址的潜在问题。但对于这个用例，这真的不在您的手中。

我可以使用'img src'来显示用户图像吗？

1 个答案: