Invalid Prop Source Supplied to image

Question

I have an Image Component which looks like this

  <Image source={imageDoc.sourceURL} style={[styles.touchableOpacityView, styles.touchableOpacityViewCircle, touchableComponentStyle]} />

I am importing Image directly from React-native

import {View, Text, StyleSheet, TouchableOpacity, Dimensions, Image} from 'react-native'

On Render, it is throwing following error

Failed prop-type: Invalid Prop source supplied to the image

My imageDoc looks like this

exif: null
localIdentifier: "CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001"
filename: "IMG_0006.HEIC"
width: 200
modificationDate: null
mime: "image/jpeg"
path: "/Users/anilbhatia/Library/Developer/CoreSimulator/Devices/04C6C587-EC5A-49DA-A438-4B9FE2FB73A7/data/Containers/Data/Application/61FE8AF8-5159-4F0D-B41B-A00AD993E86D/tmp/react-native-image-crop-picker/3FB6D756-D8CA-44F5-901A-0A9D912DC415.jpg"
size: 27297
cropRect: {y: 0, width: 1612, height: 1612, x: 269}
data: null
sourceURL: "file:///Users/anilbhatia/Library/Developer/CoreSimulator/Devices/04C6C587-EC5A-49DA-A438-4B9FE2FB73A7/data/Media/DCIM/100APPLE/IMG_0006.HEIC"
height: 200
creationDate: "1522437259"

Any idea what I am doing wrong?

iRohitBhatia iRohitBhatia · Accepted Answer · 2020-01-02T18:08:27

So I changed my Image component to something like this

 <Image source={{uri: imageDoc.path}} style={[styles.touchableOpacityView, styles.touchableOpacityViewCircle, touchableComponentStyle]} />

And it worked like magic

Invalid Prop Source Supplied to image

1 Answers