如何在React Native中通过GET请求获取图像?

hwamh0ep  于 2023-01-18  发布在  React
关注(0)|答案(1)|浏览(163)

我目前正在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>
  );
};
szqfcxe2

szqfcxe21#

你不应该调用res.json()来解析一个图像,它应该是res.blob()。这就是说,假设你试图获取一个图像,你可以这样做:

const [imagePlace, setImage] = useState(""); // initial it to an empty string
const loadImage = async (photo_reference) => {
  try {
    const res = await fetch(
      `https://maps.googleapis.com/maps/api/place/photo?maxwidth=100&photo_reference=${photo_reference}&key=KEY`
    )
    const data = await res.blob();
    setImage(URL.createObjectURL(data));
  } catch (error) {
    console.error(error)
  }
};

我使用async/await只是为了让代码看起来更好看。您使用then()的方法也可以。最后,将用于渲染图像的JSX更改为:

{imagePlace ? (
  <Image source={{ uri: imagePlace }} style={{ width: 200, height: 200 }} />
) : (
  <></>
)}

相关问题