我目前正在loadImage()
中以json文件的形式获取图像,但我很困惑,想知道哪种模式是正确的。另外需要知道的是,我只在第一个fetch
之后才获得photo_reference
参数。我使用的是Google Maps Place Photo API。从第一次获取开始,我就获得了一个JSON文件。
我的代码到目前为止:
const CardResturant = ({ resturant }) => {
const [isLoading, setLoading] = useState(true);
const [info, setInfo] = useState([]);
const [imagePlace, setImage] = useState([]);
const [isLoadImage, setLoadImage] = useState(true);
useEffect(() => {
setLoading(false);
fetch(
`https://maps.googleapis.com/maps/api/place/details/json?place_id=${resturant.id}&key=KEY`
)
.then((response) => response.json())
.then((json) => {
setInfo(json);
loadImage(json?.result?.photos[0].photo_reference);
})
.catch((error) => console.error(error))
.finally(() => setLoading(true));
}, []);
const loadImage = (photo_reference) => {
setLoadImage(false);
fetch(
`https://maps.googleapis.com/maps/api/place/photo?maxwidth=100&photo_reference=${photo_reference}&key=KEY`
)
.then((response) => response.json())
.then((photo) => setImage(photo))
.catch((error) => console.error(error))
.finally(() => setLoadImage(true));
};
return (
<View>
{!isLoading ? (
<Text>LOADING</Text>
) : (
<View>
<View>
<Image ??help?? />
</View>
</View>
)}
</View>
);
};
1条答案
按热度按时间szqfcxe21#
你不应该调用
res.json()
来解析一个图像,它应该是res.blob()
。这就是说,假设你试图获取一个图像,你可以这样做:我使用
async/await
只是为了让代码看起来更好看。您使用then()
的方法也可以。最后,将用于渲染图像的JSX更改为: