title: How do I retrieve images from JSON into React?
body: <p>I want to use JSON to retrieve my images along with their file location. My program looks like the code below. </p>
  
  <p>I've tried with <code>{photos.Lillian.portfolioImage}</code> and with <code>JSON.stringify(photos.Annalise.portofolio</code> however, none of them can display the images. I've done a <code>console.log();</code> and checked if the data can be read and it does appear however, the images will not appear. I've checked the source address and it works when I add it here <code>&lt;img src="./img/TheGuardian/Lillian.png"&gt;</code>. </p>
  
  <p>What is my error? Do I need to reformat the object called from JSON? I've seen one can use parse and fetch however, this is used for APIs and as far as I can see, this isn't?</p>
  
  <p>Here's my JSON:</p>
  
  <pre><code>{
    "Lillian" : {
      "type": "The Guardian",
      "portfolioImage": "./img/TheGuardian/Lillian.png"
    },
    "Annalise" : {
      "type": "TheGuardian",
      "portfolioImage": "./img/TheGuardian/Annalise.png"
    },
    "Raven" : {
      "type": "DCComics",
      "portfolioImage": "./img/TheGuardian/Raven.png"
    }
  }
  </code></pre>
  
  <p>Here's my HTML:</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import photos from './images.json';
  import './App.css';
  
  class App extends Component {
    render() {
      console.log(JSON.stringify(photos.Annalise.portfolioImage));
  
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h2&gt;beeccy´s portfolio.&lt;/h2&gt;
          &lt;/div&gt;
          &lt;p className="App-intro"&gt;
            This was a test to present images from my portfolio.
          &lt;/p&gt;
          &lt;img src={photos.Lillian.portfolioImage} alt="Lillian" /&gt;
          &lt;img src={photos.Raven.portfolioImage} alt="Raven" /&gt;
          &lt;img src="JSON.stringify(photos.Annalise.portfolioImage)" alt="Annalise" /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>