如何使用 javascript 显示来自 parse.com 数据库的图像？答案

【问题标题】：How do I display images from parse.com database using javascript?如何使用 javascript 显示来自 parse.com 数据库的图像？
【发布时间】：2014-03-08 18:51:17
【问题描述】：

我正在寻找有关如何使用 javascript 从我的 Parse 数据库中以 HTML 格式显示图像的答案。阅读 parse.com 上的文档并没有什么帮助。

我存储图像的类称为“内容”。图像作为文件存储在名为“图像”的列中。

【问题讨论】：

图片有网址吗？

标签： javascript jquery parse-platform

【解决方案1】：

来自Parse JavaScript Guide：

如何最好地检索文件内容取决于您的应用程序的上下文。由于跨域请求问题，最好让浏览器为您完成工作。通常，这意味着将文件的 URL 渲染到 DOM 中。这里我们使用 jQuery 在页面上渲染上传的头像：

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

所以你的步骤可能是这样的：

查询包含所需图片的行的内容类
获取图片的网址
设置图像元素的来源

下面的一些示例代码：

    // 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);
      }
    });

【讨论】：

谢谢丹尼尔。查询数据库似乎已经成功（当我在 Chrome 的开发人员工具中查看网络选项卡时，我将“内容”视为请求之一）。但是，我仍然不知道如何显示图像。我应该把 IMG 元素的 src 放在我的身体里吗？
我能看到 IMG 元素在您的 HTML 中的样子吗？如果我知道它的 id / class 是什么，我可以相应地更新我的示例代码。您还知道您的查询返回了多少项目吗？您可以在 Parse 的数据浏览器中尝试查询，方法是转到 parse.com/apps 并单击相应应用程序的数据浏览器链接。
您好丹尼尔，感谢您的回复。例如，假设图像的 id 是“颜色”。所以 HTML 类似于<img id="color">。如果我想显示数据库中的所有图像怎么办？到目前为止，我的数据浏览器中大约有 8 个项目。
我更新了示例代码，使 img id = 'color'。仍然请注意，此代码仅将一个 img 元素的源设置为 Parse 返回的第一个图像（如果返回一个）。如果您有来自 Parse 的多个图像，则需要为每个图像动态创建多个 img 元素。这开始扩大问题的范围。另请参阅 jQuery 附加：api.jquery.com/append.
这对我来说已经足够了！再次感谢丹尼尔的工作。

【解决方案2】：

以上述已接受的答案为基础。这是一个将多个图像拉回页面的示例。

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);
      }
    });

【讨论】：

为了提高效率，我认为您可以将这些 var 声明移到循环之外。例如。变量对象； for (var i ...) { obj = 结果[i]; }

【解决方案3】：

我遇到了同样的问题，但我决定将图像上传到他们的服务器并将图像 url 存储在数据库中。希望有帮助。

【讨论】：