Как отобразить изображение с сервера в nodejs и gridfs для внешнего интерфейса в реагировать - PullRequest
Новая
       12

Как отобразить изображение с сервера в nodejs и gridfs для внешнего интерфейса в реагировать

0 голосов
/ 23 ноября 2018

Я получаю изображение с сервера NodeJS в виде createReadStream.pipe (res).Я получаю ответ, используя axios.Мой вопрос заключается в том, как отобразить этот ответ в теге изображения в реагирующем веб-интерфейсе

Мой код бэкэнда, который отправляет данные 

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;

В моем теге изображения ничего не отображается.Я новичок в этом, поэтому мне трудно понять уже имеющиеся ответы

Спасибо.

...