Question

我在我的应用程序中找到了一种方便的方法，可以将没有第三方资源的小型上传图像文件（png或jpeg）保存到mongodb。生成的文档如下所示：

{ 
"_id" : "QuX8YaKmWfmBcEv", "type" : "image/png", 
"creator" : "83BEoeKvtYLTcKQtc", 
"data" : BinData(0,"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAsSURBVHjaYvz//z8DKYCJgUTAAqE+RjESVMq/7D85NoxqGCkaGGmeWgECDAAufgkbzM8Q4AAAAABJRU5ErkAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAsSURBVHjaYvz//z8DKYCJgUTAAqE+RjESVMq/7D85NoxqGCkaGGmeWgE.... and so on ....") 
}

现在，我正试图通过javascript显示这些图像，但我没做什么似乎显示图像。这是我尝试过的代码示例：

var imageFile = Images.findOne({_id: imageId})
var imageBlob = new Blob([imageFile.file], {
                type: imageFile.type
            });
var img = new Image();
img.src = URL.createObjectURL(imageBlob);
$("#contents").html('<img src="'+img.src+'">)

结果是标准的“缺失图像”图标。

奇怪的是：我在同一个应用程序中存储/检索/播放音频文件，但似乎无法使这些图像正常工作。

Answer 1

所以，事实证明这是一个简单的解决方案：

var imageFile = Images.findOne({_id: imageId})
var imageBlob = new Blob([new Uint8Array(imageFile.data)]);
var img = new Image();
img.src = URL.createObjectURL(imageBlob);
$("#contents").html('<img src="'+img.src+'">)

显示存储在mongodb上的图像文件

1 个答案: