我正在寻找一个关于如何使用javascript从我的Parse数据库中以HTML格式显示图像的答案。阅读parse.com上的文档证明没有什么帮助。
我存储图像的类称为“内容”。 图像作为文件存储在名为“图像”的列中。
答案 0 :(得分:4)
如何最好地检索文件内容取决于应用程序的上下文。由于跨域请求问题,最好是让浏览器为您完成工作。通常,这意味着将文件的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);
}
});
答案 1 :(得分:1)
基于上面接受的答案。这是一个将多个图像拉回页面的示例。
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);
}
});
答案 2 :(得分:0)
我遇到了同样的问题,但我决定将图片上传到他们的服务器并将图片网址存储在数据库中。希望有所帮助。