CardMedia в Material UI не поднимает изображение

Question

Я должен отобразить изображение в шапке и сделать так

  <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>

Изображение совершенно не отображается. Он находится в той же папке, что и этот компонент заголовка. Может кто-нибудь указать мне, что не так Обновление: у меня есть код здесь. https://codesandbox.io/s/xlw3l8yy74. Попробовал все предложения ниже. Пока не повезло

Answer 1

Вам нужно либо использовать импорт для импорта изображения, либо требовать импорта изображения. При реакции указание пути напрямую не будет работать до тех пор, пока вы не импортируете их с помощью импорта или не потребует

Использование требует

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

или используя импорт

   import logo from './logo.svg';

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

Answer 2

Вот что я сделал:

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

Затем при создании компонента <CardMedia/>:

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

Здесь, component="img", кажется, добивается цели, так как он порождает его в div, а не в элементе img , так как это defaut .

Answer 3

Правильный ли путь к файлу? Вот несколько вещей, которые вы можете попробовать:

src='./logo.svg'

или ...

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

или, может быть ...

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