Hiển thị hình ảnh được lưu trữ trong Mongo (GridFS) với nút + Jade + Express

Question

Tôi có một tệp .png nhỏ được lưu trữ trong Mongo bằng cách sử dụng GridFS. Tôi muốn hiển thị hình ảnh trong trình duyệt web của tôi bằng cách sử dụng Node + Express + Jade. Tôi có thể truy xuất hình ảnh tốt, ví dụ:

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

nhưng tôi không biết cách hiển thị hình ảnh bằng Công cụ xem Ngọc. Dường như không có bất kỳ thông tin nào trong tài liệu.

Có ai có thể chỉ cho tôi đúng hướng không?

Cảm ơn!

Answer 1

Tôi đã tìm ra điều này (cảm ơn Timothy!). Vấn đề là sự hiểu biết của tôi về tất cả các công nghệ này và cách chúng khớp với nhau. Đối với bất kỳ ai quan tâm đến việc hiển thị hình ảnh từ MongoDB GridFS bằng cách sử dụng Node, Express và Jade ...

Tài liệu của tôi trong MongoDB có tham chiếu đến Hình ảnh được lưu trữ trong GridFS là một ObjectId được lưu trữ là một chuỗi. ví dụ. MyEntity {ImageId: '4f6d39ab519b481eb4a5cf52'} < - NB: Biểu diễn chuỗi của ObjectId. Lý do tôi lưu trữ nó như là một chuỗi là vì lưu trữ ObjectId đã cho tôi một nỗi đau trong định tuyến như nó đã được vẽ như nhị phân và tôi không thể tìm ra cách để sửa lỗi này. (Có lẽ ai đó có thể giúp đỡ ở đây?). Dù sao, giải pháp tôi có là dưới đây:

FileRepository - Lấy hình ảnh từ GridFS, tôi vượt qua trong một Id String, mà tôi sau đó chuyển sang một BSON ObjectId (bạn cũng có thể nhận được các tập tin theo tên tập tin) :

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 Template - Render các Markup HTML:

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

---

App.JS nộp - Routing (sử dụng Express) Tôi thiết lập '/ data /: imgtag' con đường giúp ảnh sống động:

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); 
}); 

---

Và đó đã làm các công việc. Bất kỳ câu hỏi nào cho tôi biết :)

Answer 2

Tôi hơi bối rối về những gì bạn đang cố gắng làm ở đây, vì Jade là một ngôn ngữ đánh dấu được chỉ định cho đầu ra văn bản (chẳng hạn HTML), không phải nội dung nhị phân.

Vì bạn đang sử dụng Jade bạn có thể có một cái gì đó như thế này:

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

Vì vậy, cố gắng này:

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

Điều đó sẽ gửi các tập tin thô như một phản ứng với yêu cầu HTTP với loại mime chính xác. Nếu bạn muốn sử dụng Jade để cung cấp một mẫu (chẳng hạn như một hình ảnh popup) bạn có thể sử dụng một tuyến đường khác nhau cho popup hoặc thậm chí sử dụng một dữ liệu: uri và mã hóa dữ liệu hình ảnh trong trang.