Question

我正在尝试从本地存储中加载墙纸列表，我已经将它们发布并保存在mongoDB中。

所以我试图遍历路径数组，并将每个路径用作每个img标签中的src

main.js组件：

loc

服务器代码：

import React, { Component } from 'react'

export default class Main extends Component {
    state = {
        data : []
    }
    componentDidMount(){

        fetch('http://localhost:5000/').then(res => res.json())
        .then(data=> this.setState({data}))

    }
    render() {

        console.log(this.state.data)

        return (
            <div>
                <h1>Main</h1>
                {this.state.data ? this.state.data.map(img => 
(<div key={img._id}>{img ? <img src={require(`${img.img.path}`)} 
alt={img.img.name}/>:<span>deleted</span>}</div>)): 
<h3>loading</h3>}
            </div>
        )
    }
}

它应该返回react应用程序的uploads文件夹中的图像，但是它返回以下错误：

  server.get('/', (req, res)=>{
        Wallpaper.find({}, (err, result)=>{
            if(err) {
                res.json({msg: err})
            }else{
                res.json(result)
            }
        })
    })

Answer 1

此

<img src={require(`${img.img.path}`)}

应该是

<img src={`/uploads/${img.img.path}`}

这里不需要require

注意：在此放置正确的路径

如何在React App中从数据库中获取和显示图像

1 个答案: