javascript - React Native - 如何显示 Google Place Photos API 返回的图像?
问题描述
我开发了一个后端 API,它给出了一个位置的纬度和经度,它使用Google Places Photos API返回城市的图像
我的 React Native 应用程序调用端点来尝试将图像加载到Image
视图中。这就是应用程序调用端点并接收响应的方式......
try {
let imageResponse = await fetch(
`https://budgettrip.herokuapp.com/locationimage/${latitude}/${longitude}`
);
let response = await imageResponse;
this.setState({ locationImage: response });
} catch (error) {
console.error('location image error', error);
}
从 Google 获取图像并将响应发送回我的 React Native 应用程序的后端代码......
var locationimage = {
uri: `https://maps.googleapis.com/maps/api/place/photo?photoreference=${photo_reference}&sensor=false&maxheight=1600&maxwidth=1600&key=${process.env.GOOGLE_PLACES_API_KEY}`,
headers: {
'User-Agent': 'Request-Promise'
}
};
rp(locationimage)
.then(function(repos) {
res.send(repos);
})
.catch(function(err) {
// API call failed...
res.send(JSON.stringify({ error: 'Could not get image' }));
})
您可以在此处尝试端点以查看成功时的响应
我不确定如何在Image
视图中显示响应中的图像,因为响应不是带有 url 或本地文件的网络图像。
解决方案
照片 API 返回如下图像: https ://lh4.googleusercontent.com/-1wzlVdxiW14/USSFZnhNqxI/AAAAAAAABGw/YpdANqaoGh4/s1600-w400/Google%2BSydney
您可以像使用任何其他网络图像一样在图像组件中使用它:
<Image
style={styles.image}
source={{
uri:'https://lh4.googleusercontent.com/-1wzlVdxiW14/USSFZnhNqxI/AAAAAAAABGw/YpdANqaoGh4/s1600-w400/Google%2BSydney'
}}
/>
我认为您的问题是您的响应不是实际图像,我的意思是如果您在浏览器中点击它,您将看不到任何图像,只是一些编码的图像数据。尝试像这样在您的响应中添加一些内容类型标题,看看它是否会起作用:
Content-Type: image/svg+xml
推荐阅读
- sql - 删除具有相同时间戳但值不同的重复行
- batch-file - 使用批处理文件自动将文件添加到网站输入框中
- docker - 使用 ^D 退出 Docker Compose V2 运行
- php - 使用 GET 参数反转 shell PHP
- python - 使用 openstack SDK 创建风味
- c++ - C++ 中默认构造的对象返回和空括号返回有什么区别?
- python - 使用 selenium 和 python 为 webtalk autolike & autoshare 创建机器人的问题
- excel - 如何最好地将 0 添加到 range.value 的开头,直到它在 Excel 中的长度为 13 个字符?
- amazon-web-services - HTTPS 到 HTTP 重定向在 ALB 中不起作用
- reactjs - React Download JS PDF文件下载错误