CODEWITHSUNDEEP
javascriptreactjscreate-react-app
Melissa Stewart
Melissa Stewart

Reputation: 3625

Rendering images in React

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.

Upvotes: 1

Views: 70

Answers (1)

samb102
samb102

Reputation: 1114

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.

Upvotes: 4

Related Questions