title: How to change with fallback image with Material ui?
body: <p>Hi I am trying to change a fallback image of Material UI Avatar with my original fallback image.
  Does anyone know how to do this?</p>
  <pre><code>const fallbackImage = &quot;../../fallback/img.png&quot;
  const AvatarWithBadge = (image) =&gt; {
    const url = image ? image : fallbackImage;
    return (
   &lt;Badge
        overlap=&quot;circle&quot;
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        badgeContent={
          &lt;NavigationIcon /&gt;
        }
      &gt;
        &lt;Avatar
          src={url}
          className={classes.avatar}
          imgProps={{
              onError:(e) =&gt; { e.target.src = ${fallbackImg}`}
          }}
        /&gt;
     &lt;/Badge&gt;
  }
  </code></pre>
  <p>What I'm trying to do here is to listen to an error and replace with image from my own file.
  I would like to know how to listen when the image link is broken.</p>