redux-persist: an image uri not displayed with the component image after re-starting the application

Question

I have used ImagePicker to implement an avatar.

Simple render to click to select a simple image in your device (no problem)

<View style={{  width: 150, height: 150, borderColor: 'red'}}>
    <TouchableOpacity
      style={styles.touchableOpacity}
      onPress={this._avatarClicked}>
      {this._displayAvatarImage()}
    </TouchableOpacity>
  </View>

my _avatarClicked method: I click on the TouchableOpacity to select a image on my device (no problem)

  _avatarClicked() {
    ImagePicker.launchImageLibrary({}, (response) => {
        if (response.didCancel) {
            console.log('annulation')
        }
        else if (response.errorCode) {
            console.log('error')
        }
        else {
            let requireSource = { uri: response.uri }
            const action = { type: 'SET_AVATAR', value: requireSource }
            this.props.dispatch(action)
            // a simple action to save the uri response 
        }
      })

}

Display image : The image is display ok (no problem)

_displayAvatarImage() {
    if (this.props.avatar) { 
      console.log('display image', this.props.avatar)
      return (
        <Image style={{ height: 100, width: 100 }} source={this.props.avatar}/>
      )
    }
  }

My problem concern after to re-start the application. I leave my app and retstart.
my log console.log('display image', this.props.avatar) display the log first add image and after to retstart the app.

{"uri": "content://com.google.android.apps.photos.contentprovider/-1/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F136668/ORIGINAL/NONE/551368761"}

but no image is displayed.

I don't know if the problem concern the uri, the react-persist for my image , ...

What did I do wrong ?

Answer 1

When storing images in Redux, it's important to note that Redux itself is designed to handle serializable data, meaning plain JavaScript objects, arrays, numbers, strings, etc. Images are not serializable data types and should not be directly stored in Redux state.

Instead, you should store references or URLs to the images in your Redux state, and then load the images in your components when needed.