CODEWITHSUNDEEP
reactjsreact-nativerequirejsbase64require
Peter G.
Peter G.

Reputation: 8034

React Native: Read local image as Base64 string to send it in JSON

In React Native I'm trying to load an image stored at a relative path as a base64 string, but the require returns 3 as response instead of the image source.

I'm sure the path is correct, and I the require command works elsewhere in my Reacy Native JSX code to load images from the same relative path (<Image source={require('../resources/examplecar.jpg')}>) without any problem.

How to get a local image source from the filesystem as base64 string to send it in JSON?

var body = {
    path: '../resources/examplecar.jpg',
    data: {
        image: require('../resources/examplecar.jpg'),
    }
}

Upvotes: 1

Views: 4742

Answers (2)

Peter G.
Peter G.

Reputation: 8034

Using RNFS plugin it is possible to access the React Native assets and convert the data into a range of formats including Base64. 

imageData = await RNFS.readFile(RNFS.MainBundlePath+"/assets/resources/examplecar.jpg", 'base64').then();

Upvotes: 3

Srdjan Stajic
Srdjan Stajic

Reputation: 79

You can't have a variable in require. It won't work for image source in rn. Do 

  image: require('../resources/examplecar.jpg')

Upvotes: 1

Related Questions