显示数据库中的数据 (MERN)

编程问答 2022-05-16

问题描述

我使用multer将照片添加到MongoDB数据库中，现在我想显示它们，控制台数据如下所示：

enter image description here

代码前端应用：

constructor(props){
        super(props);

        this.onFileChange = this.onFileChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            profileImg: '',image:[]
            
        }
    }




  async fetchImage(){
        var a = await axios.get('http://localhost:3001/api');
        const img = a.data;
        this.setState({text:[img.users]})
        console.log("Dane stanu: " + this.state.image)
    }

And i try to map this:


{this.state.image.map(person => <li key={person._id}><img src={person.profileImg} alt="błąd"/></li>)}

但是什么都没显示，请帮我找到错误

编辑：我在 componentDidMount() 中添加了 fetchImage()

 componentDidMount()
    {
        this.fetchImage();
    }

解决方法

我以这种方式将图像数据从服务器发送到客户端：

fs.readFile(slidePath,(err,buf) => {
client.send(JSON.stringify({img: buf.toString('base64')})]

在反应客户端上，我是这样理解的：

<img src=`data:image/jpg;base64,${postData.img}`>
axiosaxiosaxiosexpressexpressexpressmernmongodbmongodbreactjsreactjsreactjsreactjs