'How to display an image from a pipe stream in nodejs to an img tag
We have this code that pipes an image stored in MongoDB using GridFS
exports.getOneVerificationImageByFilename = async (req, res, next) => {
const image = await gfs.files.findOne({ filename: req.params.image });
try {
const readStream = gfs.createReadStream(image.filename);
readStream.on("error", function (err) {
res.send("No image found with that title");
});
res.contentType("image/png");
readStream.pipe(res);
} catch (err) {
res.status(500).json({ error: err.message });
}
};
Im using react and I need to display this in an <img/> tag. This is how I called this endpoint
const getImage = async filename => {
try {
const response = await axios.get(`/image/${filename}`);
return response;
} catch (error) {
throw new Error(error)
}
}
Since the endpoint doesn't return any res, the response is empty. I then read about it that chunks of the data is being streamed. I found someone using this kind of syntax:
<img src="<%= url %>" />
However I dont understand it. I need to display the streamed chunks in an img tag
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
