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将是未定义的。这里的问题是你c.url助手变得疯狂，除非它收到有效的string，这是不幸的。

有几种方法，其中一种方法是创建另一个帮助

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

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

确保您的＆＃34;个人资料照片＆＃34;不仅是一个字符串，也是一个有效的id。现在，用

替换模板代码

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

应该解决您正在描述的问题。

如果defaultId不是自然的选择，如果没有提供profilePhoto，您可以使用自定义网址，所以

{{#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(); } }; }, });

但是，我不建议这样做，因为它会影响网站＆＃34; loading＆＃34;时间等用户体验也是如此。

使用Meteor显示个人资料照片

1 个答案: