我正在尝试从本地存储加载壁纸列表,我已经将它们发布并将它们的路径保存在 mongoDB 中。
所以我尝试循环路径数组并使用每个路径作为每个 img 标签中的 src
main.js 组件:
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>
)
}
}
服务器代码:
server.get('/', (req, res)=>{
Wallpaper.find({}, (err, result)=>{
if(err) {
res.json({msg: err})
}else{
res.json(result)
}
})
})
它应该返回 react 应用程序中上传文件夹中的图像,但它返回此错误:
Error: Cannot find module '/home/ahdy/Workspace/Wally/wallcraft/public/uploads/ak47456193147469824_n.jpg'
这个
<img src={require(`${img.img.path}`)}
应该是
<img src={`/uploads/${img.img.path}`}
这里不需要require
注意:在那里输入正确的路径
我是一名优秀的程序员,十分优秀!