[Resolved] Image not updating when document changes


#1

Hi all,

My account avatars aren’t updating (in-page) when they change in the db - I’m thinking it’s something to do with the helper I use to render the avatar, hoping someone will spot the issue immediately!

The avatar gets uploaded to S3 (using slingshot) and the user document gets updated successfully - I even use a timestamp hash at the end of the image filename to ensure that the value changes.

The helper I’m using:

Template.registerHelper('userAvatar', function (size) {
  if (Meteor.user()) { // Short circuit
    if (Meteor.user().profile.image){
      return Meteor.user().profile.image;
    } else {
      var emailHash = CryptoJS.MD5(Meteor.user().emails[0].address);
      var defaultImage = encodeURI('http://shot.li/cage/300/300/'); // Temporary

      if (size === 'large') {
        return 'http://www.gravatar.com/avatar/'+emailHash+'?d='+defaultImage+'&s=300';
      } else {
        return 'http://www.gravatar.com/avatar/'+emailHash+'?d='+defaultImage+'&s=68';
      }
    }
  }
});

All I can assume is that the above isn’t reactive - am I right? If so… how do I make it reactive?

If that isn’t the case, then, any other ideas?

Edit:

I’ve tried using both a ReactiveVar and Deps.Dependency based on some SO’s I’ve found, but haven’t made any progress unfortunately. I may just be approaching it wrong.


#2

Ah, I’ve just rewritten the avatar system a little, so that the default is saved in the user document when the user is created, meaning I can access the image directly from the currentUser object (i.e. bypassing the helper entirely), but the problem remains!

I’m now thinking this must be something to do with browsers only fetching the image when the page is rendered? Any ideas would be great, Google isn’t yielding anything of use. I can see if I watch the DOM that the src changes, but the image doesn’t.

Edt: Gah, turns out the way I was adding the timestamp on to the end of the filename wasn’t sufficient (see SO). I ended up with filename.ext#1448586817513 when I needed filename.ext?1448586817513 . Problem solved.