如何使用reactjs显示/渲染mongoDB中的图像

Question

我想显示MongoDB中的图像以做出反应。我已经使用django完成了后台工作，以获取图像并将其保存在我的/assets/文件夹，但当我尝试使用它时，它显示为空白。我需要将映像路径的端口从localhost:3000更改为localhost:18000通过defaut-react使用localhost:3000/img路径获取img

Answer 1

您可以使用setState()存储图像，并使用fetch()调用API

import React, { Component } from 'react'
export default class Main extends Component {
state = {
data : []
}
componentDidMount(){
fetch('http://localhost:18000/').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>
)
}
}