title: Dynamically set image src from JSON
body: <p>Am trying to set the image tag src from a JSON file in React.Js</p>
  
  <p>In a JSON file, I have the details about the images as,</p>
  
  <p>imageRepo.json</p>
  
  <pre><code>[
  {
    "image" : "../img2.jpg"
  },
  
  {
      "image" : "../img1.jpg"
  }
  ]
  </code></pre>
  
  <p>Am importing the JSON file into Js file using the code</p>
  
  <p><code>import DataImport from '../imageRepo.json'</code></p>
  
  <p>After importing am using the following code to iterate through the JSON file and updating the SRC of an image tag.</p>
  
  <pre><code>DataImport.map((item)=&gt;{
      return(&lt;div align="center"&gt;
      &lt;img src={item.image} /&gt;
      &lt;/div&gt;)
  }
  </code></pre>
  
  <p>but am not able to achieve the desired output. Image is not loading in the page. I tried using require also as,</p>
  
  <pre><code> &lt;img src={require(item.image)} /&gt;
  </code></pre>
  
  <p>this results in an error.</p>