【问题标题】: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';

    然后,在创建&lt;CardMedia/&gt; 组件时:

    &lt;CardMedia src={MySvg} component="img" title="Some title" /&gt;

    在这里,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')}
    

    【讨论】:

      猜你喜欢
      • 2018-10-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-01-29
      • 2021-05-04
      • 2019-08-07
      • 2022-01-26
      • 1970-01-01
      相关资源
      最近更新 更多