Javascript React Native-如何显示Google Place Photos API返回的图像?
我开发了一个后端API,它给出了一个位置的纬度和经度,并返回一个城市使用的图像 我的React本机应用程序调用端点,尝试将图像加载到Javascript React Native-如何显示Google Place Photos API返回的图像?,javascript,react-native,google-places-api,google-places,Javascript,React Native,Google Places Api,Google Places,我开发了一个后端API,它给出了一个位置的纬度和经度,并返回一个城市使用的图像 我的React本机应用程序调用端点,尝试将图像加载到图像视图中。这就是应用程序调用端点并接收响应的方式 try { let imageResponse = await fetch( `https://budgettrip.herokuapp.com/locationimage/${latitude}/${longitude}` ); let response = await i
图像
视图中。这就是应用程序调用端点并接收响应的方式
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本机应用程序的后端代码
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' }));
})
您可以尝试端点以查看成功时的响应
我不确定如何在
图像视图中显示响应中的图像,因为响应不是带有url或本地文件的网络图像。照片API返回如下图像:
可以在映像组件中使用,就像在任何其他网络映像中一样:
<Image
style={styles.image}
source={{
uri:'https://lh4.googleusercontent.com/-1wzlVdxiW14/USSFZnhNqxI/AAAAAAAABGw/YpdANqaoGh4/s1600-w400/Google%2BSydney'
}}
/>
Content-Type: image/svg+xml