image showing as blank

[rasselll]

Hi im trying to insert an image but its just showing up as blank, i know i am getting the corret uri, so not sue why this is the case.

import ImagePicker from 'react-native-image-picker';

          <RichTextToolbar
            getEditor={() => this.richtext}

            onPressAddImage={()=>{
        ImagePicker.showImagePicker({title: 'Pick an Image'}, res => {
            if (res.didCancel) {
                console.log('Cancled');
            }else if(res.error) {
                console.log('Error', res.error);
            }else {
                this.setState({
                    pickedImage: {
                        uri: res.uri,

                    }
                });
                alert(res.uri),
                this.richtext.insertImage({ uri: res.uri, width:200, height:200 });
            }
        });
          }}
          />

[vishaljani2]

Use src instead of uri In insertImage action

[mattslight]

@rasselll what was your solution?

[luongs3]

i got the same one, did you resolve this @rasselll @mattslight

[mattslight]

@luongs3 I had a few issues. If you are on iOS the first thing to know is that the default images on the simulator are HEIC not JPG.

Also use src prop and not uri

this.richText.insertImage({src: res.uri, width: 200, height, 200})

If in doubt try on a real device I have it working. Ping me or send me a link to your code and I will help.

[luongs3]

<RichTextEditor
          ref={(r) => this.richtext = r}
          initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
          editorInitializedCallback={() => this.onEditorInitialized()}
        />
        <RichTextToolbar
          getEditor={() => this.richtext}
          onPressAddImage={() => {
            ImagePicker.showImagePicker(options, (response) => {
              console.log('Response = ', response);

              if (response.didCancel) {
                console.log('User cancelled image picker');
              } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
              } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
              } else {
                this.richtext.insertImage({ src: response.uri, width: Dimensions.get('window').width - 30, height: 200 });
              }
            })
          }}
        />

still not work, my real device just shows image as blank @mattslight

[mattslight]

can you setState or console.log response.uri and see the value

[luongs3]

[mattslight]

hum - not sure about that android path. Most I have seen are file:/// have you tried to use response.path as src?

[luongs3]

i tried, but not work

[mattslight]

can you try

options = { ...options, includeBase64: true }

and

src: `data:${response.mime};base64,${response.data}`

[luongs3]

oh, it works, thank you so much.

[truongluuxuan]

Sorry @mattslight and @luongs3 , but I'm can't understand this code src:data:${response.mime};base64,${response.data}`` Where do I add the above code in this code: <RichTextToolbar getEditor={() => this.richtext} onPressAddImage={() => { ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response);

          if (response.didCancel) {
            console.log('User cancelled image picker');
          } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
          } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
          } else {
            this.richtext.insertImage({ src: response.uri, width: Dimensions.get('window').width - 30, height: 200 });
          }
        })
      }}
    />`

and this my console, no find "mime"? https://ibb.co/hCQR6h2

data: "/9j/4AAQSkZJRgABAQAAAQABAAD/4TYIRXhpZgAASUkqAAgAAA..." fileName: "image-ea5feeea-9756-4e84-bd61-50f050c09a91.jpg" fileSize: 41172 height: 480 isVertical: true originalRotation: 0 path: "/storage/emulated/0/Pictures/image-ea5feeea-9756-4e84-bd61-50f050c09a91.jpg" timestamp: "2018-12-24T03:11:28Z" type: "image/jpeg" uri: "content://media/external/images/media/33" width: 640

[mattslight]

@truongluuxuan

this.richtext is a handle for your editor instance. So you use the function this.richtext.insertImage

In the above code replace this:

this.richtext.insertImage({ src: response.uri });

with this:

this.richtext.insertImage({ src: `data:${response.type};base64,${response.data}` });

[truongluuxuan]

For those who have trouble like me.. find folder react-native-image-picker, in class "index.d.ts" find code: interface Options { and insert this code includeBase64: true Update, Don't follow the section above, follow Mr mattslight's instructions in the comment below and edit this code in class "App.js" in your project (not module) : this.richtext.insertImage({ src: response.uri, width: Dimensions.get('window').width - 30, height: 200 }); to this code: this.richtext.insertImage({ src:data:${response.mime};base64,${response.data}, width: Dimensions.get('window').width - 30, height: 200 }); Note: "mime" is type of image, example "image/jpg" .

Thanks again @luongs3 for helping me in this matter.

[mattslight]

@truongluuxuan I would not edit index.d.ts personally. You can include the base64 by setting an option. Check the ImagePicker.showImagePicker docs

eg:

ImagePicker.showImagePicker({ includeBase64: true, ...otherOptions }, response => someFunction(response)

[truongluuxuan]

@mattslight yeah, it works, thank you so much.