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

Question

我正在使用 Meteor 制作一个问答网络应用程序。我希望用户上传他们的图像。但是我无法理解 GridFS，所以我避免使用它。为了克服这个问题，我正在为每个用户创建一个配置文件它存储了他们的描述、名称和他们的个人资料图片的“image_url”，即我要求用户为他们的图片提供 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。

我的问题是，如果我的 webapp 上线，这个方法会起作用吗？这个方法是否正确？

Answer 1

简短回答：是的。

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