title: how to put images from JSON file to React Native Js page
body: <p>I need to put the images from JSON file to my React Native Page. Below is my code:</p>
  
  <pre><code> &lt;View style={{ flexDirection: 'row', alignItems:'center' }}&gt;
                         &lt;Image source={{item.image}} style = {styles.imageView}/&gt;
                   &lt;View style={{  flex: 1, alignItems: "center"}}&gt;
                          &lt;Text  style={styles.Address1}&gt;{item.addr} &lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code> {
  
          "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\")"
       }
  </code></pre>
  
  <p>I also tried writing image like below in my JSON file</p>
  
  <pre><code>"image" : "require('../images/CAC.png')"
  </code></pre>
  
  <p>It seems, it is reading blank image: below is the screen shot:</p>
  
  <p><a href="https://i.stack.imgur.com/dsPc6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dsPc6.png" alt="enter image description here"></a></p>
  
  <p>Below code is working, but in this case, I am writing a constant image rather than reading from json file.</p>
  
  <pre><code> &lt;Image source={require('../images/CAC.png')} style = {styles.imageView}/&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>c:\MobileApplication\test\Modules\ServiceListDetails.js
  c:\MobileApplication\test\reducers\ServiceDetails.json
  c:\MobileApplication\test\images\CAC.png
  </code></pre>
  
  <p>My project name is test. below is my imageView style</p>
  
  <pre><code>imageView:{
  width:'30%',
  height:100,
  margin:7,
  borderRadius: 7
  
  },
  </code></pre>
  
  <p>Any help will be greatly appreciated.    </p>