8

GridFS を使用して小さな .png ファイルを Mongo に保存しています。Node + Express + Jade を使用して Web ブラウザに画像を表示したいと思います。画像をうまく取得できます。例：

FileRepository.prototype.getFile = function(callback,id) {
this.gs = new GridStore(this.db,id, 'r');
this.gs.open(callback);
};

しかし、Jade View Engine を使用してレンダリングする方法がわかりません。ドキュメントには情報がないようです。

誰かが私を正しい方向に向けることができますか?

ありがとう！

4

2 に答える 2

16

私はこれを理解しました（ティモシーに感謝します！）。問題は、これらすべてのテクノロジーとそれらがどのように組み合わされるかについての私の理解でした。Node、Express、および Jade を使用して MongoDB GridFS から画像を表示することに興味がある他の人のために...

MongoDB のマイ ドキュメントには、文字列として格納された ObjectId である GridFS に格納された Image への参照があります。例: MyEntity {ImageId:'4f6d39ab519b481eb4a5cf52'} <-- 注意: ObjectId の文字列表現。それを文字列として保存した理由は、ObjectId を保存すると、ルーティングがバイナリとしてレンダリングされ、これを修正する方法がわからなかったためです。（多分誰かがここで助けることができますか？）。とにかく、私が持っている解決策は以下の通りです：

FileRepository - GridFS から画像を取得します。文字列 ID を渡します。これを BSON ObjectId に変換します (ファイル名でファイルを取得することもできます)。

FileRepository.prototype.getFile = function(callback,id) {
   var gs = new GridStore(this.db,new ObjectID(id), 'r');
   gs.open(function(err,gs){
      gs.read(callback);
   });
 };

Jade テンプレート- HTML マークアップをレンダリングします。

img(src='/data/#{myentity.ImageId}')

App.JS ファイル- ルーティング (Express を使用) 動的イメージの「/data/:imgtag」ルートをセットアップします。

app.get('/data/:imgtag', function(req, res) {
  fileRepository.getFile( function(error,data) {
     res.writeHead('200', {'Content-Type': 'image/png'});
     res.end(data,'binary');
  }, req.params.imgtag );
});

そして、それは仕事をしました。質問があれば教えてください:)

于 2012-03-24T03:30:27.720 に答える
8

Jade はバイナリ コンテンツではなく、テキスト出力 (HTML など) 用の要約マークアップ言語であるため、ここで何をしようとしているのか少し混乱しています。

Jade を使用しているため、おそらく次のようなものがあります。

app.get/'images/:imgtag', function(req, res) {
    res.render('image', {imgtag: req.params.imgtag);
});

だからこれを試してください：

app.get/'images/:imgtag', function(req, res) {
    filerep.getFile( function(imgdata) {
        res.header({'Content_type': 'image/jpeg'})
        res.end(imgdata);
    }, req.params.imgtag );
});

これにより、正しい MIME タイプを使用して、HTTP 要求への応答として raw ファイルが送信されます。Jade を使用してテンプレート (画像ポップアップなど) を配信する場合は、ポップアップに別のルートを使用するか、data: uri を使用してページ内の画像データをエンコードすることもできます。

于 2012-03-23T21:12:31.160 に答える