how to put images from JSON file to React Native Js page

user_5775000 0
Viewed 9865

I need to put the images from JSON file to my React Native Page. Below is my code:

 <View style={{ flexDirection: 'row', alignItems:'center' }}>
                       <Image source={{item.image}} style = {styles.imageView}/>
                 <View style={{  flex: 1, alignItems: "center"}}>
                        <Text  style={styles.Address1}>{item.addr} </Text>
                </View>
            </View>

I can read other things from my JSOn file like item.addr is coming from json file, but not sure how to read the image. I tried writing my json file like this:

 {

        "addr": "124 test drive, Ring road",
        "phone": "(951)-955-6200",
        "LatL":"33.977880",
        "Long2":"-117.373423",
        "cLat": "33.931989",
        "cLong": "-117.409222",
        "Online": "https://www.test.org",
         "image" : "require(\"CAC.png\")"
     }

I also tried writing image like below in my JSON file

"image" : "require('../images/CAC.png')"

It seems, it is reading blank image: below is the screen shot:

enter image description here

Below code is working, but in this case, I am writing a constant image rather than reading from json file.

 <Image source={require('../images/CAC.png')} style = {styles.imageView}/>

My code is in a directory called Modules that resides in project directory directory. My project name is test and my Json file is in a directory called Reducers and reducers also resides in project directory and my images are in a directory called images that also resides in the project directory. below is the path:

c:\MobileApplication\test\Modules\ServiceListDetails.js
c:\MobileApplication\test\reducers\ServiceDetails.json
c:\MobileApplication\test\images\CAC.png

My project name is test. below is my imageView style

imageView:{
width:'30%',
height:100,
margin:7,
borderRadius: 7

},

Any help will be greatly appreciated.

react-native reactjs
3 Answers

Be sure that your image's name is correct in your json file. For instance, .png instead .PNG, and then you need something like this:

Firstly create a component to load your icons: 

c:\MobileApplication\test\Modules\Icons.js
exports.CAC = require('../assets/images/CAC.png');
exports.CAD = require('../assets/images/CAD.png');
exports.CAE = require('../assets/images/CAE.png');

Secondly import your Icons inside your component:

c:\MobileApplication\test\Modules\ServiceListDetails.js
import Icons from './Icons';
import resources from './ServiceDetails.json';

Finally:

  <Image source={Icons[resources.image]} style = {styles.imageView}/>

Now you have to change o json with the code you want. 

    "image": "CAC"
}

Or

   "image": "CAD"
}

Or

 "image": "CAE"
}
user_10168830

By Facebook docs you can do it by two method.

First:

by STATIC images as you use before but some changes needed in your JSON. Rewrite your object like this

{
    "addr": "124 test drive, Ring road",
    "phone": "(951)-955-6200",
    "LatL":"33.977880",
    "Long2":"-117.373423",
    "cLat": "33.931989",
    "cLong": "-117.409222",
    "Online": "https://www.test.org",
    "image" : require("CAC.png") // <-- This line
}

and use it Like this

<Image source={item.image} style = {styles.imageView}/>

Second: if you get this JSON from external server, you should get image from server too.

{
    "addr": "124 test drive, Ring road",
    "phone": "(951)-955-6200",
    "LatL":"33.977880",
    "Long2":"-117.373423",
    "cLat": "33.931989",
    "cLong": "-117.409222",
    "Online": "https://www.test.org",
    "image" : "https://example.com/path/to/your/image.png" // <-- This line
}

use it Like this

<Image source={{uri: item.image}} style = {styles.imageView}/>

UPDATE:

for this issue you can do this.

Json is like this

{
    "addr": "124 test drive, Ring road",
    "phone": "(951)-955-6200",
    "LatL":"33.977880",
    "Long2":"-117.373423",
    "cLat": "33.931989",
    "cLong": "-117.409222",
    "Online": "https://www.test.org",
    "image" : "CAD" // <-- This line
}

And the function

getImage = (image) => {

    switch (image) {
        case "CAD":
            return require("CAD.png")
            break;
        case "CAD2":
            return require("CAD2.png")
            break;
        case "CAD3":
            return require("CAD3.png")
            break;

        default:
            return require("CAD4.png");
            break;
    }
}

And 

<Image source={this.getImage(item.image)} style = {styles.imageView}/>
user_56351890

I had the same problem and after research I managed to solve it by putting the JSON data in a constant in JS, with that I was able to import the image and only inform the import in the JSON object. Example:

import imageImport from './image.png';

export const example = [
  {
    "name": "example",
    "image": imageImport
  }
]

<Image source={example.image}/>
user_151137950
Related