显示存储在MongoDb中的图像

本文关键字：图像 MongoDb 存储 显示 | 更新日期: 2023-09-27 17:59:01

我有一个类似pinterest的应用程序。图像和其他相关信息存储在MongoDb中。图像的大小通常约为1mb。图像以无限滚动方式显示。当加载带有base64字符串的长脚本时，浏览器崩溃或响应时间非常长（尤其是对于Internet Explorer）显示存储在MongoDb中的图像的最佳方式是什么？

显示存储在MongoDb中的图像

我认为实现这一点的最佳方法是将文件物理地保存在服务器上的某个公用文件夹中。这应该是可以访问的方式，你只需要使用类似的东西

http://www.myhost.com/images/my/path/to/image.jpg

您仍然可以在mongodb中维护Base64映像作为备份，但是，由于性能问题（正如您所看到的），这不是检索映像的最佳方式。我建议您执行以下操作：

每次在mongo上存储图像时，一定要将"图像文件"本身存储在服务器上的某个公共位置。请记住，您应该将该文件的路径保留在您正在使用的mongo模型上。因此，下次调用对象时，应该只获取图像的路径，而不是获取基本的64图像。

比方说，你有这个型号的

myModel = {
    name: "some name",
    image64: "someextralongstringveryveryveryweird......",
    imageUrl: "/images/my/path/to/image/imagename-id.jpg"
}

下次查询时，您可以使用mongo投影忽略image64，而在客户端，您只需使用一些利用该url的html标记。

<img src="/images/my/path/to/image/imagename-id.jpg">

这将对你的表现有很大帮助。

有一些库可以帮助您管理图像文件的创建。ImageMagick是我使用过的一个，用途非常广泛。

我想您有这个应用程序的服务器端部分吗？为什么不创建一个小型的API来检索图像？

所以你的浏览器会有关于图像的信息，可以向你的服务器索取，类似于http://your_server/api/image/imageID或http://your_server/images/imagename，然后你的服务器就会流式传输这个图像，你不需要将其存储在文件系统中。

在客户端（浏览器），您只需要实现"延迟加载"。

如果您使用MongoDB，则应该使用GridFS将图像存储在数据库中(http://excellencenodejsblog.com/gridfs-using-mongoose-nodejs/)，这是一个为您的应用程序公开类似虚拟文件系统的功能。

使用GridFS，您可以编写一个控制器方法，从MongoDB实例流式传输请求的文件，并将文件内容通过管道发送到响应。

我建议将图像存储在文件系统上，并使用您的web服务器来处理向客户端提供图像的问题。为了提高性能，我会把它们放在CDN上，它将能够处理流量。

在应用程序存储（mongo）中，您可以存储图像的URL/位置，然后在javascript代码中检索图像时使用它。

此外，在您的代码中，我建议通过javascript预加载图像，该javascript在用户滚动查看图像之前预加载图像。有一些很棒的工具，你可以利用。

万一您无法更改存储，并且必须按原样使用mongo，我会考虑使用javascript预加载图像。

我也遇到了同样的问题。所以我使用mongodb来存储我的图像。

我就是这样做的：

定义徽标模式：

var logoSchema = new mongoose.Schema({
    name: String,
    url: String
});

将徽标模式编译为模型：

var Logo = mongoose.model("Logo", logoSchema)

创建新徽标：

var rectblack = new Logo({
    name:"rect&black",
    url:"public/image.jpg"
});

保存：

rectblack.save(function(err, logo){
    if(err){
        console.log("some went wrong")
    } else {
        console.log("logo saved")
        console.log("logo")
    }
});

现在要使用这个标志或图像，我刚刚用图像标签（只是文件名！！）：

<img src="/image.jpg">.
相关文章：