title: How can I make my images render in Material UI Cards for React+Typescript
body: <p>I'm currently trying to render images in Material UI's cards. For each card, I'm passing in props from information read in a constants.tsx file. Currently, the heading, description, and bodyHeader are all being properly read, but my imgSrc is not. </p>
  
  <p>My directory looks like this: 
  <a href="https://i.stack.imgur.com/2CYVp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2CYVp.png" alt="enter image description here"></a></p>
  
  <p>And the snippet of my code displaying the card in my card.tsx looks like this:</p>
  
  <pre><code>export default function SimpleCard(props) {
    const classes = useStyles();
  
    const {title, bodyHeader, description, imgSrc} = props;
    return (
      &lt;Card className={classes.root}&gt;
          &lt;CardHeader 
              className = {classes.headerStyle}
              title={title}
        /&gt;
        &lt;CardMedia
          style = {{height: '150px'}}
          //className={classes.media}
          image={imgSrc}
        /&gt;
  </code></pre>
  
  <p>And here is my constants.tsx</p>
  
  <pre><code>export default[
      {
          title: 'Finding Pitbulls Homes Through a Fun-Friendly Fostering Form',
          description: 'UX + UI Design',
          bodyHeader: 'Biggies Bullies Redesign',
          imgSrc: './images/publicart.png'
      },
  
      {
          title: 'Improving Public Art Appreciation and Social Connectivity Through a Life-Sized Circuit',
          description: 'UX Research',
          bodyHeader: "The Human Circuit",
          imgSrc: './images/pitbull.png'
      },
  
      {
          title: 'Creating an Intuitive and Useful Workday System for Employees at a Creamery',
          description: 'Fullstack Development',
          bodyHeader: "The Amazing Creamery Workday System",
          imgSrc: './images/workday.png'
      }
  
  ]
  </code></pre>