Material UI 中的 CardMedia 没有拾取图像答案

【问题标题】：CardMedia in Material UI not picking up the imageMaterial UI 中的 CardMedia 没有拾取图像
【发布时间】：2018-10-31 16:06:45
【问题描述】：

我必须在标题中显示图像并以这种方式显示

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

图片绝对拒绝出现。它与此 Header 组件位于同一文件夹中。有人可以指出我有什么问题吗更新：我这里有代码。 https://codesandbox.io/s/xlw3l8yy74。尝试了以下所有建议。还没有运气

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这就是我所做的：

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

然后，在创建<CardMedia/> 组件时：

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

在这里，component="img" 似乎可以解决问题，因为它会在 div 中而不是在 img 元素中生成它 since it's the defaut。

【讨论】：

我试过这样做，但它给了我一个“请验证 package.json 有一个有效的“主”条目”错误并且它没有编译。

【解决方案2】：

您需要使用 import 导入图像或要求导入图像。在反应中直接指定路径将不起作用，除非您使用 import 或 require 导入它们

使用要求

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

或者使用导入

   import logo from './logo.svg';

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

【讨论】：

require() 不工作。它给出了错误Warning: Failed prop type: Invalid prop src of type object supplied to ForwardRef(CardMedia), expected string.

【解决方案3】：

文件路径是否正确？以下是您可以尝试的一些方法：

src='./logo.svg'

或者...

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

或许……

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

【讨论】：