React native: invaild source for image when source is a formatted string retrived from Firestore-CodePudding

I have saved following image source along with uri in firebase as a string

coverImage " uri: "https://images.unsplash.com/photo-1570102881689-c04ab4cf1f4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=60"

along with other attributes such as title extra. when i am passing the prop in the Image source the following error shows

Warning: Failed prop type: Invalid prop `source` supplied to `Image`, expected one of type [number].

following is the image prop.

<Image style={{ width: 250, height: 250 }} source={`{${item.image}}`} />

I have consoled.log the item.image and the link is working fine in when I ctrl click on it. Any feedback as to what I am doing wrong.

In console.log I get the following result

Array [
  Object {
    "id": "al1tT6JfNYssimYZ8Lhy",
    "image": " uri: \"https://images.unsplash.com/photo-1570102881689-c04ab4cf1f4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=60\"",
    "title": "Lorem ipsum",
  },
]

and console.log the item.image when I render it through the flatlist following is the result.

uri: "https://images.unsplash.com/photo-1570102881689-c04ab4cf1f4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=60"

CodePudding user response：

Have you already tried this? <Image source={{ uri: item.image }} />

CodePudding user response：

Try setting URI as shown below:

<Image style={{ width: 250, height: 250 }} source={{ uri: item.image }} />

Also the image field in the object seems to be prefixed with uri:, try setting an URL starting with https://.