'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