反应本机图像选择器无法显示图像

Question

i'm trying to use image picker and display image on Image component. Here my code

const [photo, setPhoto] = useState("")

const options = {
    title: "pick an image",
    storageOptions: {
      skinBackup: true,
      path: 'images'
    }
}

const openCamera = async _ => {
await launchCamera(options,  (res) => {
  if (res.didCancel) {
    console.log("canceled")
  }
  else if (res.error) {
    console.log("err")
  }
  else if (res.customButton) {
    console.log("cstm btn")
  }
  else {
    const source =  { uri:  res.uri };
    console.log("Imagesource=" + JSON.stringify(source));
  }
})

}

here Image component

<ScrollView style={styles.postContent}>
  {
    photo && (
        <Image
            source={photo}
            style={{ height: 300, width: 300 }} />
        )
  }

camera can open and take a photo. then i can't see the image source like this.

Imagesource={}

Answer 1

DO this please

const [photo, setPhoto] = useState("")

const options = {
    title: "pick an image",
    storageOptions: {
      skinBackup: true,
      path: 'images'
    }
}

const openCamera = async _ => {
await launchCamera(options,  (res) => {
  if (res.didCancel) {
    console.log("canceled")
  }
  else if (res.error) {
    console.log("err")
  }
  else if (res.customButton) {
    console.log("cstm btn")
  }
  else {
    setPhoto(res?.uri)
  }
})

And in here do this:

<ScrollView style={styles.postContent}>
  {
    photo && (
        <Image
            source={{uri:photo}}
            style={{ height: 300, width: 300 }} />
        )
  }

Hope it helps