本文介绍了如何在Reaction中显示另存为BLOB的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我编写了一个将图像保存为BLOB的函数：
render() {
...
return (
...
<input
accept="image/*"
onChange={this.handleUploadImage.bind(this)}
id="contained-button-file"
multiple
type="file"
/>
)}
这是onChange：
中调用的函数 handleUploadImage(event) {
const that = this;
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
that.setState({
image: URL.createObjectURL(file),
userImage: reader.result,
});
};
}
我认为这很好用，因为它保存在数据库中，因为文档有一个名为image的字段，如下所示：blob:http://localhost:3000/80953c91-68fe-4d2a-8f5e-d9dd437c1f94
该对象可以像this.props.product那样访问，要访问它所在的镜像this.props.product.image
问题是当我想要显示图像时，我不知道如何操作。
我尝试将其放入Render中，如下所示：
{
this.props.product.image ? (
<img alt="" src={this.props.product.image} />
) : (
null
);
}
它引发此错误：
和标题：
有什么建议吗？
推荐答案
您应该尝试URL.createObjectURL(Blob)
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
myImage.src = URL.createObjectURL(blob);
这篇关于如何在Reaction中显示另存为BLOB的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！