title: React, image from array not showing up in <img src>
body: <p>Fairly stumped on this and can't seem to get it to work even though I feel I have everything correct.</p>
  
  <p>I have an array that references an image path in my <code>SRC</code> file and then in my component I want to display that image using an <code>img src</code>tag but it's just giving me a broken image.  </p>
  
  <p>In my array I reference the image here</p>
  
  <pre><code>    const actors = [
    {
      person: 'Luke Skywalker',
      trivia: 'wants to go to the Tashi Station',
      image: '../../../../static/jt-luke.jpg',
      id: 1
    },
    {
      person: 'Leia Organa',
      trivia: 'Likes Buns',
      image: '../../../../static/jt-leia.jpg',
      id: 2
    },
    {
      person: 'Han Solo',
      trivia: 'is scruffy',
      image: '../../../../static/jt-han.png',
      id: 3
    },
    {
      person: 'Chewbacca',
      trivia: 'laughs it up like a fuzzball',
      image: '/jt-chewie.jpg',
      id: 4
    }
  ];
  
  export default actors;
  </code></pre>
  
  <p>And then in my component I have it setup as so</p>
  
  <pre><code>  const { actors } = this.props;
  const namesList = actors.map(actors =&gt; {
    return (
      &lt;Col style={{ width: '100%' }} sm={12} md={6} lg={3}&gt;
        &lt;UnorderedListed&gt;
          &lt;img src={actors.image} /&gt;
          &lt;p&gt;
            {actors.person}
          &lt;/p&gt;
          &lt;p&gt;{actors.trivia}&lt;/p&gt;
        &lt;/UnorderedListed&gt;
      &lt;/Col&gt;
    );
  </code></pre>
  
  <p>which is returned by calling <code>namesList</code></p>
  
  <pre><code>  &lt;UnorderedStyled&gt;
      &lt;Row&gt;
        {namesList}
      &lt;/Row&gt;
    &lt;/UnorderedStyled&gt;
  </code></pre>
  
  <p>I don't understand why I'm getting the error, can anyone assist? Thank you!</p>