如何使用React前端显示来自Mongoose的<img>图像
最终目标:让用户上传图片(小于16mb，所以不用担心Grid FS)，通过Mongoose将图片存储在我的Mongodb数据库中，并使用属性将图片显示在屏幕上。
要上传文件，我使用Multer并将其添加到数据库中，如下所示：
newItem.picture.data = Buffer(fs.readFileSync(req.file.path), 'base64');
newItem.picture.contentType = 'image/png';它似乎已经成功地添加到了mongodb中。看起来像这样：how the image appears on mongodb
我可以从我的前端发送一个get请求，当我console.log它时，我得到的是：Data after being retreived from database。现在的问题是，如何将其添加到属性并在屏幕上显示图像。谢谢!
编辑:问题已被版主标记为过宽。公平地说，我不太确定如何处理它。既然我能够解决这个问题，这就是我的前端的样子。
componentDidMount() {
const PATH = "http://localhost:8080/apii/items/getitems";
axios.get(PATH)
.then(res => {
let picture64Bit = res.data[0].data.data
picture64Bit = new Buffer(x, 'binary').toString('base64');
this.setState({picture: picture64Bit})
})
.catch(err => console.log(err))
}这里的关键是，1) res.data.data.data等于该随机数字列表。我将其转换回base64，因此它看起来与上面mongodb中的第一张图片完全一样。然后，在img属性中以内联方式显示它是非常容易的：
<img src = {`data:image/png;base64,${this.state.picture}`} /> 回答 1
Stack Overflow用户
发布于 2018-05-29 17:26:58
您可以使用几个库，但我将随意选择Axios作为演示。如果图像已经在Mongo DB中，这听起来很好。
您的目标是将照片从服务器发送到客户端，因此您需要一个函数来按需获取它们。您还可以研究fetch或request。
Axios：https://www.npmjs.com/package/axios
在React中，尝试如下所示
async getPhotos() {
const res = await Axios.get('/photos')
console.log('RESPONSE', res)
const photos = res.data
console.log('IMAGES', photos)
this.setState({ photos })
}下面是一个更完整的示例
import React, { Component } from 'react'
import Axios from 'axios'
class List extends Component {
constructor(props) { // super props allows props to be available
super(props) // inside the constructor
this.state = {
photos : [], // Initialize empty list to assert existence as Array type
// and because we will retrieve a list of jpegs
error: '', // Initialize empty error display
}
}
componentDidMount() {
this.getPhotos() // Do network calls in componentDidMount
}
async getPhotos() {
try {
const res = await Axios.get('/photos')
console.log('RESPONSE', res)
const photos = res.data
console.log('IMAGES', photos)
this.setState({ photos, error: '' })
} catch (e) {
this.setState({ error: `BRUTAL FAILURE: ${e}` })
}
}
render() {
if (error.length) {
return (
<div>{this.state.error}</div>
)
}
if (!photos.length) {
return (
<div>No photos yet</div>
)
}
// Assuming shape { id: 0, caption: 'Cats again', src: 'http://www.com/win.jpg' }
// Make sure to include key prop when using map (for state management)
return (
<ul>
{this.state.photos.map(photo => (
<li key={photo.id} style={{ position: 'relative' }}>
<span>{photo.caption}</span>
<img src={photo.src}
<div
className="overlay"
style={{
position: 'absolute'
width: '100%',
height: '100%',
}}
/>
</li>
))}
</ul>
)
}
}引用：In React.js should I make my initial network request in componentWillMount or componentDidMount?
如果你想在之后再取一张照片，你应该试着不变地思考，用一个自身的副本加上推到数组末尾的新图像来替换this.state.photos数组。我们将使用扩展操作符在现有的照片数组上进行浅层复制。这将允许React针对这两个状态进行比较，并有效地更新新条目。
const res = await Axios.get('/photo?id=1337')
const photo = res.data
this.setState({
photos: [...photos, photo]
})注意：秘诀就是避免使用this.state.photos.push(photo)。你必须在这样的设置状态上放置一个非法的标志。
在React中，尝试考虑一种可以获取对象或数组的方法。一旦你想好了，就把它放到组件的状态中。当您进入Redux时，您有时会将项目存储在Redux存储中。这太复杂了，现在也没有必要去描述。这些照片可能会通过Redux Connect功能以this.props.photos的形式出现。
在大多数其他情况下，组件的state字段是存储组件感兴趣的任何内容的绝佳位置。
您可以将其想象为组件顶部的支架。
https://stackoverflow.com/questions/50579235
复制相似问题