流星：發送圖像爲base64到HTML

我想HTTP從URL獲取圖像，並且請求的內容（我認爲這將是一個base64圖像）發送到HTML img標籤的地方將作爲SRC的img。下面是我爲我的模板的一個助手，但它不能正常工作：流星：發送圖像爲base64到HTML

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屬性，但我不能這樣做，因爲各種原因。

來源

2016-03-02 user1837378

這樣的URL呈現了我一個二進制，不是的base64編碼。這是打算嗎？ – DaSourcerer

示例URL指向一個jpeg文件。在這種情況下，執行'HTTP.get'是多餘的，因爲您可以直接將鏈接放入'src'屬性。 –

我從獲取圖像的API將不提供圖像，如果它鏈接到一個img標籤的src（除非我在本地運行的服務器），所以我想通過使用HTTP來解決這個問題GET請求。我不知道它是否會起作用。 – user1837378

我覺得你的代碼複製的base64有效載荷，而不適當地應用data: URI scheme。這應該這樣做：

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

來源

2016-03-02 22:35:40 DaSourcerer

我認爲問題是與回調。如果我在'return result.content;'行之前執行'console.log（result.content）;'，我會在控制檯中看到圖像的base64編碼。但是如果我說'var foo = HTTP.get ...'，那麼'foo'沒有得到我想要的值。當我將'foo'登錄到控制檯時，它會變成'undefined'。 – user1837378

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任何地方，當數據的變化（即變成可用），您的視圖將自動更新。

注意：在您的示例URL中，圖像是jpeg而不是base64。

來源

2016-03-03 03:27:33

我在哪兒放'myVar'？我不能只將函數放在模板助手代碼中嗎？ – user1837378

你應該把'myVar'放在文件的開頭。它應該在助手之外。 –

流星：發送圖像爲base64到HTML

回答

相關問題