изображение не отображается при вызове API

Question

• 1000 заголовок и подзаголовок они не показывают изображение

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

when I click on this card image disappear only show title and subtitle введите описание изображения здесь

Answer 1

Глядя на данные JSON, вы должны сделать:

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

Answer 2

Вы должны получать изображение как URL-адрес, поэтому измените исходную опору

с:

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

To:

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