从嵌套函数中获取返回值

Get a return from nested function

本文关键字：获取 返回值 函数 嵌套      更新时间：2023-09-26

我尝试检查(在一个模板的助手)，如果一个图像存在-通过给定的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>

你可以使用Promise:

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();
    }
})
相关文章：