CardMedia in Material UI not picking up the image

user_9189465 0
Viewed 10925

I have to display an image in the header and have it this way 

  <Toolbar className={classes.toolbar}>
    <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" color="inherit" className={classes.grow}>
      Menu
    </Typography>

    <CardMedia
      className={classes.media}
      src='logo.svg'
      title="Logo"
    />
  </Toolbar>
</AppBar>

The image absolutely refuses to show up. It is placed in the same folder as this Header component. Can somebody point to me whats wrong Update: I have the code here. https://codesandbox.io/s/xlw3l8yy74. Tried all the suggestions below. No luck yet

material-ui reactjs
3 Answers

Here's what I did:

import MySvg from './path-to-svg.svg';

Then, when creating the <CardMedia/> component:

<CardMedia src={MySvg} component="img" title="Some title" />

Here, component="img" seems to do the trick since it would spawn it in a div rather than in a img element since it's the defaut.

user_1304800

You need to either use import to import image or require to import image. In react specifying path directly won’t work until and unless you import them using import or require

Use require

    <CardMedia
         className={classes.media}
         src={require('./logo.svg')}
         title="Logo"
     />

Or using import

   import logo from './logo.svg';

   <CardMedia
         className={classes.media}
         src={logo}
         title="Logo"
     />
user_69034970

Is the file path correct? Here are a few things you might try:

src='./logo.svg'

or...

src={require('logo.svg')}

or maybe...

src={require('./logo.svg')}
user_102912750
Related