MongoDbに保存されている画像を表示する

Question

私は気に入ったアプリケーションがあります。画像やその他の関連情報はMongoDbに保存されています。一般に、画像のサイズは約1Mbです。画像は無限のスクロールで表示されます。 base64文字列を含む長いスクリプトが読み込まれると、ブラウザがクラッシュしたり、応答時間が非常に長くなります（特にInternet Explorerの場合） MongoDbに保存されている画像を表示する最適な方法は何ですか？

Answer 1

このアプリケーションのサーバー側の部分はありますか？なぜ画像を取得するための小さなAPIを作成しないのですか？

あなたのブラウザは画像に関する情報を持っており、http://your_server/api/image/imageIDまたはhttp://your_server/images/imagenameという行にサーバーに問い合わせることができます。サーバーはこのイメージをストリームするだけです。これをファイルシステムに保存する必要はありません。

クライアント側（ブラウザ）では、「遅延読み込み」を実装するだけで済みます。

Answer 2

これを達成する最良の方法は、サーバー上の一部のパブリックフォルダに物理的にファイルすることです。これはあなただけあなたはまだバックアップとしてMongoDBの中であなたのBase64イメージを維持することができます

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

のようなものを使用する必要がありますようにづけしなければなりません、しかし、これはするための最良の方法ではありませんあなたが見たように、パフォーマンスの問題が原因でイメージを取得します。次のことをお勧めします：

イメージをmongoに保存するたびに、サーバー上の公開されている場所にイメージファイルを保存するようにしてください。使用しているmongoモデルにそのファイルへのパスを保存する必要があることに注意してください。したがって、次回はオブジェクトを呼び出すときにベース64イメージを取得するのではなく、イメージへのパスのみを取得する必要があります。

あなたがそれに問い合わせる次回は、あなただけのmongo投影を使用してimage64を無視することができ、あなたのクライアント側にはあなただけ使用する一部のHTMLタグを使う

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

あなたがこのモデルを持っている、と言うことができますそのURLの。

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

これはパフォーマンスの向上に役立ちます。

イメージファイルの作成を管理するのに役立つライブラリがいくつかあります。 ImageMagickは私が使用しているものであり、多用途です。

Answer 3

MongoDBを使用している場合は、GridFS（http://excellencenodejsblog.com/gridfs-using-mongoose-nodejs/）を使用してデータベースに画像を保存する必要があります。この機能は、アプリケーションの仮想ファイルシステムのようなものを公開します。

GridFSを使用すると、MongoDBインスタンスから要求されたファイルをストリームし、ファイルの内容を応答にパイプするコントローラメソッドを記述することができます。

Answer 4

イメージをファイルシステムに保存し、Webサーバーを使用してクライアントに配信することをお勧めします。 パフォーマンスのために、私はそれらをトラフィックを処理することができるCDNに置くでしょう。

アプリケーションストレージ（mongo）では、URL /場所を画像に保存してから、JavaScriptコードで画像を取得する際に使用できます。

また、あなたのコードでは、画像をプリロードするjavascriptを使用して画像をプリロードすることをお勧めします。そこにはいくつかの素晴らしいツールがあり、それを活用することができます。

ストレージを変更することができず、mongoをそのまま使用する必要があります。の画像をjavacriptで事前ロードしています。