Conforme declarado nos comentários, é melhor ter um ponto de extremidade separado em seu aplicativo para fazer essas chamadas "parecerem" solicitações de arquivo estático padrão. Então, a primeira coisa que eu faria é mudar um pouco seu esquema:
picture: {
metadata: {
name: { type: String, default: null },
comment: { type: String, default: null },
publisherID: { type: String,default: null },
date: { type: Date, default: Date.now },
size: { type: Number,default: 0 },
type: { type: String, default: null }
},
path: { type: String, required: true },
mime: { type: String, required: true },
data: { type: Buffer, default: null },
tags: Array
}
Então, isso adiciona dois campos que identificarão o "caminho" para a imagem a ser correspondida e "mime" como o tipo mime do arquivo. Portanto, "path" é um identificador mais "amigável" do que um
_id
e o "mime-type" seria definido na inserção para corresponder ao tipo de conteúdo retornado. Em seguida, você configura uma rota para veicular o conteúdo:
app.get('/images/:imgname', function(req,res) {
Picture.find({ "picture.path": req.param("imgname") }, function(err,pic) {
if (err) // checking here
// Sending response
res.set('Content-Type', pic.mime);
res.send( pic[0].picture.data );
});
})
Então, quando você fez um pedido como:
Isso aconteceria:
-
Encontre o "caminho" correspondente ao documento para "test.png"
-
Atribua a propriedade do documento para "picture.mime" como o tipo de conteúdo para a resposta
-
Envie os dados binários de volta como resposta
Portanto, para o cliente, é um arquivo real como resposta, e o ponto é que o "navegador" pode armazenar em cache isso e não atingir seu aplicativo onde a cópia "em cache" é válida.
Se você estiver incorporando dados codificados em Base64 em respostas JSON, você perde essa parte importante e você envia os dados todas as vezes. É também um processo muito confuso de lidar, como você descobriu.