React-native: Unable to use local tmp file path for Image.source

[mattotodd]

I am trying to use a local tmp file for the source of an Image and keep seeing error "Unrecognized tag protocol"

from the docs:

source {uri: string}
uri is a string representing the resource identifier for the image, which could be an http address, a local >file path, or the name of a static image resource (which should be wrapped in the >required('image!name') function).

Have tried (giving the image explicit height and width)

<Image style={styles.thumb} source={{uri:"/var/mobile/Containers/Data/Application/5938C9F8-0A9D-40DD-AB9F-CD2C772439E7/tmp/thumbimage_8gVFD"}} />

<Image style={styles.thumb} source={{uri:"file:///var/mobile/Containers/Data/Application/5938C9F8-0A9D-40DD-AB9F-CD2C772439E7/tmp/thumbimage_8gVFD"}} />

<Image style={styles.thumb} source={require("image!"+"/var/mobile/Containers/Data/Application/5938C9F8-0A9D-40DD-AB9F-CD2C772439E7/tmp/thumbimage_8gVFD"} />

Loading web assets or static image resource works just fine.

[mattotodd]

Found the answer, need to pass isStatic to the source of the image.

I feel this should be added to the Image docs

<Image style={styles.thumb} source={{isStatic:true, uri:"/var/mobile/Containers/Data/Application/5938C9F8-0A9D-40DD-AB9F-CD2C772439E7/tmp/thumbimage_8gVFD"}} />

[vjeux]

Would be nice indeed. Want to send a pull request?

[mattotodd]

np

[menway]

How to avoid using absolute path for local file uri?

[idibidiart]

isStatic didn't work for me... resorted to adding images into images.xcassets as described in the docs ... too bad it's not called images.xcasettes

[PimDeWitte]

For anyone coming here looking to solve the android file loading issue, you need to put file:// in front of your file on android

[vishalkakadiya]

@idibidiart I know it's very late to comment over here, but this can help others in Future.

In my case tag must have

width and height in style property

+

isStatic : true in source property

to display image, otherwise it wan't visible.

[1c7]

2018 now, using React Native 0.52
isStatic:true totally work!
Thanks!

[jayasimhaprasad]

@vishalkakadiya thank you very much for this tip , the image started showing up as soon as i specified the height and the width property

[caiosba]

What worked for me on Android was a combination of many comments here:

• isStatus: true
• Prepend the file path with file://
• Set the dimensions