Rendering images in React

Question

I can't seem to get images to display in my react app created using create-react-app. This is my directory structure:

build
node_modules
public
src
  assets
  components
    header
      ImportingComponent.js
  data
    data.js
  css

The path to the image lives in an object in the data directory in the data.js file

import asdfgProfile from "../assets/IMG_20181128_182110.jpg";
import zxcvbProfile from "../assets/38492604_10157553680894256_362213635956670464_n.jpg";

const f =[
    {
        "name": "asdfg",
        "thumbnail": {asdfgProfile}
    },
    {
        "name": "zxcvb",
        "thumbnail": {zxcvbProfile}
    }

];
export default founders;

This is code in the component that calls it,

{props.founders.map( item =>
        <div className="firstFounder">
             <img src={(item.thumbnail)}></img>
             <h2>{item.name}</h2>
             <h3> {item.designation}</h3>
             <p>{item.blurb}</p>
        </div>
 )}

The image doesn't seem to render. What am I doing wrong here.

Answer 1

const f =[
    {
        "name": "asdfg",
        "thumbnail": {asdfgProfile}
    },
    {
        "name": "zxcvb",
        "thumbnail": {zxcvbProfile}
    }

];

Remove brackets from {zxcvbProfile}, {asdfgProfile}, you're creating a thumbnail: { } object, not providing a value.