javascript - 如何从快速后端服务器获取和显示图像到 React Native 前端?
问题描述
搜索同一主题时,我发现了另一个问题: 如何从快速后端服务器获取和显示图像到 React js 前端? 并且在评论中有这样的:“将你的 blob 转换为 File var file = new File( res.data, { type: "image/jpeg" } ); var imageUrl = URL.createObjectURL(file); 然后使用这个 imageUrl ”。所以我做了类似于他的代码并得到了错误。
fetchImages = () => {
const imageName = 'Vinicius_0-1577392361334.jpg';
api.get(`/image/${imageName}`)
.then(res => {
var file = new File(res.data, { type: 'image/jpg' });
var imageURL = URL.createObjectURL(file);
return (
<Image source={imageURL} />
)
}).catch((err) => {
console.log(err)
});}
routes.get('/image/:file', (req,res) =>{
let file = req.params.file;
let fileLocation = path.join(__dirname, '..', '..', 'backend/uploads/', file);
res.sendFile(`${fileLocation}`);
});
.....
<View style={styles.viewBotao}>
{this.fetchImages()}
.....
解决方案
尝试将您分配imageURL
给状态变量
constructor(props) {
super(props);
this.state = {
imageURL: ''
}
}
fetchImages = () => {
...
var imageURL = URL.createObjectURL(file);
this.setState({ imageURL });
...
}
<View style={styles.viewBotao}>
<Image source={this.state.imageURL} />
</View>
推荐阅读
- python - 使用python在图中查找最高分路径的函数
- c# - 如何检测 log4net 上的跟踪文件滚动
- botframework - 在瀑布的第一步中使用 HeroCard Carsousel 不会继续下一步
- python - 如何以简写方式从 Bash 执行 Python3 脚本?
- ios - Ruby:LoadError - 找不到类 Digest::SHA1 的库——摘要/sha1
- excel - 对多个 .xlsx 文件进行操作,其中数据可以位于每个文件的不同列中
- reactjs - 尝试为从“babel-plugin-relay/macro”导入的宏加载配置“relay”时出错
- java - 使用 Content-Type 标头从 eml 文件中提取附件名称
- java - 即使使用 .classpath 文件,VS Code 的类路径也不完整
- string - Ada - (Streams) 如何在事先不知道字符串长度的情况下正确调用 String'Read()