Adding a background image to a card component from props

Question

I tried to insert a background image into the card component from props, got no error but the image did not display in the card component either. I can't really tell what I'm doing wrong. Please I need a better idea/way to go about fixing this issue. Thanks

project.js

import React from "react";
import { Card, CardTitle, CardText, CardActions, Button } from "react-mdl";

const Project = ({ image, technology, description, projectName }) => {
  return (
    <div>
      <Card
        shadow={0}
        style={{ width: "320px", height: "320px", margin: "auto" }}
      >
        <CardTitle
          expand
          style={{
            color: "#fff",
            background: `url(${image})`,
          }}
        >
          {technology}
        </CardTitle>
        <h6>{projectName}</h6>
        <CardText>{description}</CardText>
        <CardActions border>
          <Button colored>View Updates</Button>
        </CardActions>
      </Card>
    </div>
  );
};

export default Project;

projects.js

import React from "react";
import { projectList } from "./projectList";
import Project from "./project";

const Projects = () => {
  return (
    <div>
      {projectList.map((user, i) => {
        return (
          <Project
            key={i}
            id={projectList[i].id}
            technology={projectList[i].technology}
            projectName={projectList[i].projectName}
            description={projectList[i].description}
            image={projectList[i].image}
          />
        );
      })}
    </div>
  );
};

export default Projects;

The image is imported into the projectList.js array of objects

projectList.js

import MIT from "../img/mit.png";

export const projectList = [
  {
    id: 1,
    technology: "HTML | CSS | Bootstrap",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },
  {
    id: 2,
    technology: "Reactjs",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },
  {
    id: 3,
    technology: "React Native",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },
  {
    id: 4,
    technology: "Vue",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },
  {
    id: 5,
    technology: "Angular",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: { MIT },
  },

];

Answer 1

The error is from projectList.js, the image key in the objects of the array.

Should have been like this

import MIT from "../img/mit.png";

export const projectList = [
  {
    id: 1,
    technology: "HTML | CSS | Bootstrap",
    projectName: "Lorem",
    description: "Lorem Ipsum is simply dummy text.",
    image: `${MIT}`,
  }
]