title: Adding a background image to a card component from props
body: <p>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 </p>
  
  <p>project.js</p>
  
  <pre><code>import React from "react";
  import { Card, CardTitle, CardText, CardActions, Button } from "react-mdl";
  
  const Project = ({ image, technology, description, projectName }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Card
          shadow={0}
          style={{ width: "320px", height: "320px", margin: "auto" }}
        &gt;
          &lt;CardTitle
            expand
            style={{
              color: "#fff",
              background: `url(${image})`,
            }}
          &gt;
            {technology}
          &lt;/CardTitle&gt;
          &lt;h6&gt;{projectName}&lt;/h6&gt;
          &lt;CardText&gt;{description}&lt;/CardText&gt;
          &lt;CardActions border&gt;
            &lt;Button colored&gt;View Updates&lt;/Button&gt;
          &lt;/CardActions&gt;
        &lt;/Card&gt;
      &lt;/div&gt;
    );
  };
  
  export default Project;
  </code></pre>
  
  <p>projects.js</p>
  
  <pre><code>import React from "react";
  import { projectList } from "./projectList";
  import Project from "./project";
  
  const Projects = () =&gt; {
    return (
      &lt;div&gt;
        {projectList.map((user, i) =&gt; {
          return (
            &lt;Project
              key={i}
              id={projectList[i].id}
              technology={projectList[i].technology}
              projectName={projectList[i].projectName}
              description={projectList[i].description}
              image={projectList[i].image}
            /&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  
  export default Projects;
  </code></pre>
  
  <p>The image is imported into the projectList.js array of objects</p>
  
  <p>projectList.js</p>
  
  <pre><code>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 },
    },
  
  ];
  </code></pre>