react-native-zss-rich-text-editor
react-native-zss-rich-text-editor copied to clipboard
How to Insert image
## I have tried all the way to insert image in editior ,but its not showing image after inserting and not giving any error too Plz help it have been couple of days of doing this
My code is
onPressAddImage={() => { ImagePicker.openPicker({ width: 300, height: 300, }).then((image) => { console.log(image); this.richtext.insertImage({ src: image.path, width:200, height:200 }); }).catch((error) => { console.log(There has been a problem with your fetch operation: ${error}); }); }}
when I am inserting a remote image then it works fine but when i am inserting local image path (react-native-crop-image-picker : image.path or image.uri or image.sourceURL) it does not insert image ,it just shows blank
when I uploaded my app to testflight, image didn't show up when user picking the images from album, but local is work
@vishai12345 - I am also having the same issue, did you find any solution?
@vishai12345 - You can configure ImagePicker to get base64 of the selected image, and then you can insert an image in richtext.
ImagePicker.openPicker({
includeBase64: true,
compressImageQuality: 0.5
})
.then(image => {
let imageSrc = `data:${image.mime};base64,${image.data}`;
this.richtext.insertImage({ src: imageSrc });
});
Did the same as @kantharia, but the image is not shown up on the screen. Remote image works well. Any idea?
Actually remote image doesn’t work as well (it used to work back then when I tested it)
Ok, I see the issue. It happens if the focus on the field was not set in advanced
@vishai12345 - You can configure
ImagePickerto get base64 of the selected image, and then you can insert an image in richtext.ImagePicker.openPicker({ includeBase64: true, compressImageQuality: 0.5 }) .then(image => { let imageSrc = `data:${image.mime};base64,${image.data}`; this.richtext.insertImage({ src: imageSrc }); });
This worked for me, thanks.