如何使用javascript顯示來自parse.com數據庫的圖像？

Question

我正在尋找關於如何使用javascript在我的Parse數據庫中顯示HTML圖像的答案。閱讀parse.com上的文檔證明沒有多大幫助。

我存儲圖像的類稱爲'內容'。 圖像作爲文件存儲在名爲'圖像'的列中。

Answer 1

從Parse JavaScript Guide：

如何最好檢索文件內容重新取決於應用程序的情況下。由於跨域請求問題，最好讓瀏覽器爲您完成工作。通常，這意味着將文件的URL呈現到DOM中。這裏我們渲染頁面上上傳的個人資料照片用jQuery：

var profilePhoto = profile.get("photoFile"); 
$("profileImg")[0].src = profilePhoto.url(); 

所以，你的步驟可以是這樣的：

1. 查詢內容類爲具有所需圖像的行
2. 獲取圖片的網址
3. 設置圖片元素的來源

下面的一些示例代碼：

// Query the content class for rows where the image exists 
    var Content = Parse.Object.extend("content"); 
    var query = new Parse.Query(Content); 
    query.exists("image"); 
    query.find({ 
     success: function(results) { 
     // If the query is successful, store each image URL in an array of image URL's 
     imageURLs = []; 
     for (var i = 0; i < results.length; i++) { 
      var object = results[i]; 
      imageURLs.push(object.get('image')); 
     } 
     // If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array 
     if(imageURLs.length > 0){ 
      $('#color').attr('src', imageURLs[0]); 
     } 
     }, 
     error: function(error) { 
     // If the query is unsuccessful, report any errors 
     alert("Error: " + error.code + " " + error.message); 
     } 
    }); 

Answer 2

我碰到了同樣的問題，但我還是決定將圖片上傳到自己的服務器和存儲在數據庫中的圖像的URL。希望有所幫助。

Answer 3

建立在上面接受的答案上。以下是將多個圖像重新放回頁面的示例。

var GlobalBadges = Parse.Object.extend("GBadges"); 
    var query = new Parse.Query(GlobalBadges); 
    query.exists("Global_Badge_Name"); 
    query.find({ 
     success: function(results) { 
     // If the query is successful, store each image URL in an array of image URL's 
     imageURLs = []; 
     for (var i = 0; i < results.length; i++) { 
      var object = results[i]; 
      imageURLs.push(object.get('Global_Badge_Name')); 
     } 
     // If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array 
     for(var j = 0; j < imageURLs.length; j++){ 
      $('#imgs').append("<img src='" + imageURLs[j] + "'/>");     
     } 
     }, 
     error: function(error) { 
     // If the query is unsuccessful, report any errors 
     alert("Error: " + error.code + " " + error.message); 
     } 
    }); 

</script> 

<div id="imgs"> </div> 
</body> 
</html> 

而這個例子說明你必須拉多個圖像並在div中定義它們。

var GlobalBadges = Parse.Object.extend("GBadges"); 
    var query = new Parse.Query(GlobalBadges); 
    query.exists("Global_Badge_Name"); 
    query.find({ 
     success: function(results) { 
     // If the query is successful, store each image URL in an array of image URL's 
     imageURLs = []; 
     for (var i = 0; i < results.length; i++) { 
      var object = results[i]; 
      imageURLs.push(object.get('Global_Badge_Name')); 
     } 

     $('#Image01').attr('src',imageURLs[0]); //first image 
     $('#Image02').attr('src',imageURLs[1]); //second image 
     $('#Image03').attr('src',imageURLs[2]); //third image 
     }, 
     error: function(error) { 
     // If the query is unsuccessful, report any errors 
     alert("Error: " + error.code + " " + error.message); 
     } 
    });