Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

189
Views
React native: invaild source for image when source is a formatted string retrived from Firestore

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"
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

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://.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!