Question

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

for (var i = 0; i < example[i] ['hello'].length; i ++)
{
  If (example[i] ['hello'].length > 0) {
    1. More than one row then textbox value must change to bold 
       but not all column does not need to have data. 

    2. If full row and all column have data then the textbox 
       will change to yellow color + bold. 
  }
}

图像绝对拒绝显示。它被放置在与此Header组件相同的文件夹中。有人可以指出我怎么了吗更新：我在这里有代码。 https://codesandbox.io/s/xlw3l8yy74。尝试了以下所有建议。还没有运气

Answer 1

文件路径正确吗？您可以尝试以下几种方法：

src='./logo.svg'

或...

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

或者也许...

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

Answer 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"
     />

Answer 3

这就是我所做的：

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中产生。

Material UI中的CardMedia无法拾取图像

3 个答案: