在React中从后端dataURL创建图像

Question

我试图得到HTML画布的快照，像这样:

const canvas = canvasRef.current
let image = canvas.toDataURL('image/jpeg');
await axios.post('/api/entries/', { dataURL: image })

，它似乎正在工作，并正确连接到数据库。

但是我不知道如何使用dataURL在React前端创建一个图像组件

我能够从后端获取它们并记录dataURL。

const pics = await axios.get('/api/entries/')
pics.data.map((pic) => { console.log(pic.dataURL) })

我想我只是不确定下一步要把每个dataURL变成一个元素

下面是我的getPics函数:

const getPics = async () => {
const pics = await axios.get('/api/entries/')
return (
pics.data.map((pic) => (
<img src={pic.dataURL} key={pic.dataURL} />
))
)
}

的用法与

类似

<div>
{getPics()}
</div>

Answer 1

将图像置入状态，并将获取置入useEffect()函数

const [pic,setPics] = useState();
useEffect(() => {
const getPics = async () => await axios.get('/api/entries/')
.then(res => {
setPics(res.data);
})
getPics();
}, [])

映射是正确的方法…映射时，您可以将数据放入img元素中，这将在页面上呈现每个图像。键值是用来让react知道每个元素之间的区别的。

return (
{pics.data.map((pic) => (
<img src={pic.dataURL} key={pic.dataURL} />
))}
)