title: Image not displaying in material-ui CardMedia element
body: <p>I've created a simplified version of an issue I am having in my application.</p>
  <p>I have a card component (represented here by <code>MyCardComponent</code>) which I want to pass a string prop into with the location of an image file and have that rendered in a <code>CardMedia</code> element on a material-ui  <code>Card</code></p>
  <p><em>However the image doesn't appear, how do I get it to render</em> ? . See issue re-created in CodeSandbox</p>
  <p><a href="https://codesandbox.io/s/image-on-card-kyx0s?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit image-on-card" /></a></p>
  <p><strong>MyCardComponent.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import &quot;./styles.css&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import { Card, CardMedia, CardContent } from &quot;@material-ui/core&quot;;
  
  const useStyles = makeStyles(theme =&gt; ({
    cardRootStyle: {
      minHeight: 300,
      maxHeight: 300
    },
    cardMediaStyle: {
      minHeight: 100,
      maxHeight: 100
    }
  }));
  export default function MyCardComponent(props) {
    const styles = useStyles();
    return (
      &lt;&gt;
        &lt;Card
          classes={{
            root: styles.cardRootStyle
          }}
        &gt;
          &lt;CardContent&gt;
            &lt;CardMedia image={props.imagePath} /&gt;
          &lt;/CardContent&gt;
        &lt;/Card&gt;
      &lt;/&gt;
    );
  }
  
  MyCardComponent.propTypes = {
    imagePath: PropTypes.string
  };
  
  </code></pre>
  <p>I call <code>MyCardComponent</code> like this</p>
  <pre><code>&lt;MyCardComponent imagePath='/static/sampleimages/cocacola.png'/&gt;
  </code></pre>