流星模板的HTML图像链接未由浏览器呈现

Question

if (Meteor.isClient) {
Template.app.helpers({
'showAvatar' : function () {
  var userId = Meteor.user().services.facebook.id;
  var userAvatar = "<img src='http://graph.facebook.com/" + userId + "/picture?type=square&height=160&width=160'/>";
      return userAvatar;
    }
  });
}

<div class="container">
{{#if currentUser}}
    {{> app}}
{{/if}}
</div>
</body>

<template name="app">
    {{ showAvatar }}
</template>

When my app runs in the browser, the HTML for the image tag is displayed rather than the image.

Example:

img src='http://graph.facebook.com/123456789654/picturetype=square&height=160&width=160'/>

I know Meteor apps serve local image assets from a /public directory, but I'm not sure why the image src tag isn't being rendered by the browser. I am able to successfully display the Facebook users name and email address.

Thanks for your help!

Answer 1

Try changing the Template helper to this.

if (Meteor.isClient) {
Template.app.helpers({
showAvatar : function () {
  var userId = Meteor.user().services.facebook.id;
  var userAvatar = 'http://graph.facebook.com/' + id + '/picture?type=square&height=160&width=160';
      return userAvatar;
    }
  });
}

And call this helper into the HTML like this.

<img src="{{showAvatar}}" alt="" />