如何从Nodejs和gridfs中的服务器显示图像到reactjs中的前端

Question

我正在从NodeJS服务器获取以下形式的图像：  createReadStream.pipe（res）。 我正在使用axios接收响应。 我的问题是如何在反应前端的image标签中显示该响应

我正在发送数据的后端代码

router.get('/get_profile_image/:filename',(req,res)=>{
    gfs.files.findOne({filename:req.params.filename},(err,file)=>{
        if(file){
            const readStream=gfs.createReadStream(file.filename)
            readStream.pipe(res);
        }
        else{
            res.status(403).json("no file with this name")
        }
    })
})

我收到响应的前端代码：

import React from 'react';
import './friend.css';
import axios from 'axios';

class Friend extends React.Component{
constructor(props){
    super(props);
    this.state={name:'',picture:[]}

    axios.get(`http://localhost:3002/get_name/${this.props.id}`)
    .then(res=>{
        this.setState({name:res.data})
     })

     axios.get(`http://localhost:3002/image/get_profile_image/
      ${this.props.profile_pic_id}`)
    .then(res=>{

        let picture=new Buffer('binary').toString('base64');
      this.setState({picture:picture})
    })

}
render(){
    console.log(this.state.picture)
    return(
        <div className='inside'>
        <img src={this.state.picture} height='200px' width='200px'/>
        <h3>{this.state.name}</h3>
        <br/>
        </div>
    )
   **strong text**}
  }
 export default Friend;

我的图像标签中什么也没有显示。 我是新来的，所以我很难理解已经存在的答案

谢谢。