Can I make use of 'img src' to display user image?

Question

I am using Meteor to make a Question-Answer web app.I want users to upload their images.However I am having trouble understanding GridFS so I am avoiding it.In order to overcome this I am creating a profile for every user which stores their description,name and an 'image_url' for their profile image i.e. I am asking the users to give url for their image which is placed in the img src to display their profile image.In the local server it is working fine and the image of every user is displayed.

Here is the common.js.

I have kept the src and other fields blank which can be filled in the create profile page

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
    }
});

After this the user is directed to the create profile page where he/she is asked about his/her description and profile image url and the user profile in the data base is updated.

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');

    }
});

Here is the 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 });
    }
});

Here is the 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>

This is the profile page of every user-

<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>

Here {{src}} is returning the image_url provided by the user.

My question is will this method work if my webapp goes online and is this method correct?

Answer 1

Short Answer: Yes.

It would help to see your helper method to make sure it's done right, but if it's rendering fine then I think you did it right. You just run into the potential problem of a user submitting a bad URL. But for this use case, that's really out of your hands.