title: Display image from API In React
body: <p>I am trying to display an image from my API. The code I am using so far does not seem to work, in the src of the image it shows just the string not the image i.e <code>&lt;img src="{data.home[0].image}" alt="image"&gt;</code>. </p>
  
  <p>My code so far is: </p>
  
  <pre><code>  import React, { Component } from 'react';
    import '../main/main.css';
  
    class Main extends Component {
        constructor() {
            super();
            this.state = {
                name: 'React',
                awsApiData: [],
            };
        }
  
        componentDidMount() {
            console.log('app mounted');
            /*global fetch */
            fetch('https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/livestage/xxxx')
                .then(data =&gt; data.json())
                .then(data =&gt; this.setState({ awsApiData: data }, () =&gt; console.log(data)));
        }
  
        render() {
            const data = this.state.awsApiData;
            return (
                &lt;div className="main-content container"&gt;
             {(data &amp;&amp; data.home) &amp;&amp;
                &lt;div&gt;&lt;h2&gt;{data.home[0].title}&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;{data.home[0].body}&lt;/p&gt;
                &lt;img src="{data.home[0].image}" alt="image"&gt;&lt;/img&gt;
                &lt;/div&gt;
            }    
        &lt;/div&gt;
            );
        }
    }
    export default Main;
  </code></pre>