title: React returns image src as object
body: <p>I have a variable defined like this:</p>
  
  <pre><code>const team = [
    {
      name: "Foo",
      bio: "FooBar",
      image: { foo }
    },
    {
      name: "Bar",
      bio: "FooBar",
      image: { bar }
    },
  ];
  </code></pre>
  
  <p>Where the images are imported like this:</p>
  
  <pre><code>import foo from "../assets/foo.jpg";
  import bar from "../assets/bar.jpg";
  </code></pre>
  
  <p>These are then passed to a component to be rendered, with:</p>
  
  <pre><code>&lt;TeamRow team={team} /&gt;
  
  The TeamRow component looks like this:
  
  const TeamRow = props =&gt; {
    const items = props.team.map((item, index) =&gt; {
      return (
        &lt;div className="col-10 col-sm-4 col-md-1 mx-auto text-center"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-12 teamMemberImage"&gt;
              &lt;img className="img-fluid" src={item.image} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-12"&gt;{item.name}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-12"&gt;{item.bio}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    });
    return &lt;div className="row"&gt;{items}&lt;/div&gt;;
  };
  
  export default TeamRow;
  </code></pre>
  
  <p>The images fail to render. When I look at them in the dev tools, they have <code>src="Object object"</code>. The class that calls <code>TeamRow</code>, is the class in which <code>team</code> is defined. After defining it, calling <code>console.log(foo</code> returns the url pointing to the image, as expected. Somehow, in being passed to the second component, the expected behaviour ceases.</p>
  
  <p>Strangely, earlier, I was using the react logo as a placeholder. So:
  <code>import logo from "../assets/logo.svg";</code>, and this worked, but only if I rendered it as <code>src={item.image.logo}</code>.</p>