Utilizing Express, Node.js, and Mongodb to develop a webpage for uploading and displaying image files.
The binary of the image is stored in Mongodb using a schema.
Below is a snippet of code from index.js and db.js:
var Post = mongoose.Schema({
image: {data: Buffer, contentType: String}
});
var post= new Post({ });
post.image.data=fs.readFileSync(req.file.path);
post.image.contentType='image/png';
Following the submission and search for a post within the mongo shell, here is part of the code relating to the image field:
"image: {"data:BinData(0,"iVBORw0KGgoAAAANSUhEUE.... (truncated)
rkJggg=="),
"contentType": "image/png"}
It appears that the binary data of the image file is successfully saved in Mongodb,
However, the issue lies in displaying the image on the webpage using the binary data. How can the binary buffer data be converted to create an image tag?
<img src="data:{{image.contentType}};base64,{{image.data}}">
An attempt was made with the above code, resulting in an error:
Failed to load resource: net::ERR_INVALID_URL
If you have any insights on how to resolve this issue, your assistance would be greatly appreciated. Thank you!