api调用中未显示图像

Question

当我触摸此卡片时，该卡片上会有一个列表屏幕，您将转到详细信息屏幕，此图像和标题来自后端问题是，当我单击卡片时，它会进入详细信息屏幕，并且仅显示标题和副标题没有显示图片

export default function ListingsScreens({ navigation }) {
  const [listings, setListing] = useState([]);
  useEffect(() => {
    loadListings();
  }, []);
  const loadListings = async () => {
    const response = await listingApi.getListings();
    setListing(response.data);
  };
  return (
    <ExpoScreen style={styles.screen}>
      <FlatList
        data={listings}
        keyExtractor={(listings) => listings.id.toString()}
        renderItem={({ item }) => (
          <CardList
            title={item.title}
            subtitle={"$" + item.price}
            imageUrl={item.images[0].url}
            onPress={() => navigation.navigate("ListingDetails", item)}
          />
        )}
      />
    </ExpoScreen>
  );
}

这是我的列表详细信息屏幕

export default function ListingDetailsScreen({ route }) {
  console.log(route);
  const listing = route.params;
  return (
    <View style={styles.Screen}>
      <View style={styles.card}>
        <Image style={styles.CardImage} source={listing.image} />
        <View style={styles.tittleContainer}>
          <AppText style={styles.title}>{listing.title}</AppText>
          <AppText style={styles.subtitle}>{listing.price}</AppText>
        </View>
      </View>
      <ListItem
        image={require("../assets/dummyFemale.png")}
        title="Anna bella"
        sutitle="suck 5 person blood"
      />
    </View>
  );
}

这是我的API

当我单击此卡片图像时，消失仅显示标题和副标题

Answer 1

查看JSON数据，您应该这样做：

<Image style={styles.CardImage} source={{ uri: listing.images[0].url }} />

Answer 2

您必须以网址形式获取图片，因此请更改您的来源属性

来自：

<Image style={styles.CardImage} source={listing.image} />

收件人：

 <Image style={styles.CardImage} source={{uri: listing.image}} />