I have a react native app that needs to show images of products if they exist. I store the base64 encoded image on a local SQLite as a blob and render them as follows:

<Image source={{uri: "data:image/png;base64,"   imgsource}} style={{height: 150, width: null, flex: 1}}/>

Where imgsource is the base64 string retrieved from the database. The image and other information are stored directly from the database in an object array.

I'm using React Native 0.61.5

On Android everything works perfectly fine, however, on IOS images are not being displayed. Am I missing something?

CodePudding user response：

Either give width/height or flex, both will not work together:

 <Image source={{uri: "data:image/png;base64,"   imgsource}} style={{height: 150, width: 150 }}/>

CodePudding user response：

There are 3 possible problems:

1. In a way how you encode your image - example of this problem and fix https://github.com/facebook/react-native/issues/34115

2. You encode SVG as base64 - https://github.com/facebook/react-native/issues/34115

3. You use an old version of the flipper https://github.com/facebook/react-native/issues/28583