显示Meteor的头像

Question

我想为用户显示一张头像。我有一个默认的照片，是保存时，用户第一次获得一个帐户。

Accounts.createUser({
      email: email,
      username: username,
      password: password,
      profile: {
        profilePhotoUrl: "..."
      }
}

我想在导航栏上显示这张照片：

<img src="{{c.url profile.profilePhotoUrl format=format}}">

这张照片似乎有时会显示，而不是其他。我相信这是订阅的问题。

Exception from Tracker recompute function:
meteor.js:888 TypeError: Cannot read property 'match' of undefined
    at cloudinary_url (lepozepo_cloudinary.js:338)
    at Object.$.cloudinary.url (lepozepo_cloudinary.js:432)
    at Object.Cloudinary._helpers.url (lepozepo_cloudinary.js:799)
    at spacebars.js:245
    at Spacebars.call (spacebars.js:172)
    at Spacebars.mustacheImpl (spacebars.js:109)
    at Object.Spacebars.mustache (spacebars.js:113)
    at HTML.DIV.HTML.BUTTON.HTML.IMG.src (template.header.js:57)
    at Object.Blaze._withCurrentView (blaze.js:2197)
    at Blaze._HTMLJSExpander.def.visitAttribute (blaze.js:2125)

我不确定这是什么意思，但我认为它正在接收null，因为我还没有订阅profile.profilePhotoUrl。我怎样才能使它对整个站点可用呢？我也想展示其他人的头像，那么如何才能做到这一点呢？

Answer 1

之所以会发生这种情况，是因为在从服务器加载当前用户数据之前，profile.profilePhotoUrl是未定义的。这里的问题是，除非收到有效的string，否则你的c.url帮助器会变得疯狂，这是不幸的。

有几种方法可以离开这里，其中之一是创建另一个帮助器

var defaultId = "..."; // make sure this is a valid public id

Template.registerHelper('getProfilePhoto', function () {
  return (this.profile && this.profile.profilePhoto) || defaultId;
});

这将确保您的"profilePhoto“不仅是一个字符串，而且是一个有效的id。现在，将模板代码替换为

<img src="{{c.url getProfilePhoto format=format}}">

应该可以解决您所描述的问题。

如果没有defaultId的自然选择，您可以在没有提供profilePhoto的情况下使用自定义url，因此

{{#if profile.profilePhoto}}
  <img src="{{c.url profile.profilePhotoUrl format=format}}">
{{else}}
  <img src="/a/path/for/default/avatar.png">
{{/if}}

你也可以使用一些加载指示器来代替默认图像。

编辑

如果您在应用程序中使用某种类型的路由，例如iron:router，那么也可以等到用户数据到达时再呈现模板，因此

Router.route('/user/profile/page', {
  // ...
  waitOn: function () {
    return {
      ready: function () {
        return !!Meteor.user();
      }
    };
  },
});

但是，我不建议这样做，因为这会影响网站的“加载”时间，因此也会影响用户体验。

Answer 2

默认情况下，并不是发布用户的所有属性。您必须通过将它们添加到UserData发布来显式地添加它们。

你可以在这个答案中找到一个例子：Meteor User Property

此外，根据您定义传送路线的方式，您需要重新订阅userData发布以使数据可用，或者您可以将订阅放在显示图片的模板中。