如何使用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); 
     } 
    });