Question

我想从URL获取HTTP GET图像并将该请求的内容（我认为将是base64图像）发送到HTML img标记，在该标记中它将作为img的src。这是我作为模板助手之一，但它无法正常工作：

getPosterFromURL: function(posterURL) {
  return HTTP.get(posterURL, function(error, result) {
    if (!error) {
      return result.content;
    } else {
      return false;
    }
  });
},

这是我的img标签，以防万一：

<img src="{{getPosterFromURL posterURL}}" class="img-responsive">

示例网址：

http://ia.media-imdb.com/images/M/MV5BMTI2NDI5ODk4N15BMl5BanBnXkFtZTYwMTI3NTE3._V1_SX300.jpg

如果我获取GET请求的base64内容并将其复制粘贴到img标记的src属性中，它可以正常工作，但如果我尝试使用模板帮助程序，则不行。

注意：简单的解决方案是将URL设置为HTML img标记的src属性，但出于各种原因我不能这样做。

Answer 1

HTTP.get是异步调用。这意味着它不会阻止程序的执行，相反，即使在HTTP.get完成并调用回调之前，其余同步程序的执行仍将继续。

getPosterFromURL: function(posterURL) {
    var result = // <---- called synchronously, stores 'undefined'

      HTTP.get(posterURL, function(error, result) { // <-- called asynchronously
        if (!error) {
            return result.content;
        } else {
            return false;
        }
      });

    return result; // <---- called synchronously, returns 'undefined'

}

我能想到解决这种情况的方法是使用ReactiveVar：

var myVar = new ReactiveVar(null); // initially null or some other appropriate value

var getFromURL = function(url) {
    HTTP.get(url, function(error, result) {
        if (!error) {
            myVar.set(result); // set the result into myVar when it is available
        }
    });
};

现在，您可以在Template.helpers的任何位置使用myVar，当数据发生变化（即可用）时，您的视图会自动更新。

注意：在示例网址中，图片为jpeg而非base64。

Answer 2

我认为您的代码正在复制base64有效内容而未适当地应用data: URI scheme。这应该做：

<img src="data:image/jpeg;base64,{{getPosterFromURL posterURL}}" class="img-responsive">

Meteor：将图像作为base64发送到HTML

2 个答案: