Javascript 从嵌套函数获取返回值

如果存在图像，我会尝试通过给定的url检入模板的帮助器

如果文件存在，我想将空格键设置为此url。 如果不存在，则应返回另一个url

我的问题是从onload-/onerror函数中获取返回值：

Template.backgroundImage.helpers({
    image: function() {
        var url = '/background/'+file+'.jpg';

        var img = new Image();
        img.onload = function() { return url; }
        img.onerror = function() { return '/background/image.jpg'; }
        img.src = url;
    }
});

<template name="backgroundImage">
    <img src="{{image}}">
</template>

你可以使用承诺：

Template.backgroundImage.helpers({
  image: function() {
    return new Promise(function(resolve) {
      var img = new Image();
      var url = '/background/' + file + '.jpg';
      img.addEventListener('load', function() { resolve(url); });
      img.addEventListener('error', function() { resolve('/background/image.jpg'); });
      img.src = url;
    });
  }
});

---

您可以使用Template onRendered回调在出现错误时更新图像SRC：

Template.backgroundImage.helpers({
    image: function() {
        return '/background/'+file+'.jpg';
    }
});

Template.backgroundImage.onRendered(function(){
    var $img = this.$('img'); //Whatever your selector is, not sure if this.$ works in onRendered though

    // "one" makes sure event is only fired once, see below
    $img.one("error", function() {
     $img.attr('src','/background/image.jpg')
    });

    // If image was loaded, reload it
    // This is usually used to check if images were loaded from cache
    // but as you only want to track errors, it's probably unnecessary 
    if($img.get().complete) {
        $img.load();
    }
})

---

使用会话设置图像path@Tushar：太好了。谢谢你的想法。meteor模板支持帮助者返回的承诺吗？