无法在我的ReactJs应用程序中显示图像

时间:2017-03-08 22:34:49

标签: reactjs

return (
    <Card>
      <CardHeader
      title="Full Name"
      subtitle="@username"
      avatar="./../assets/img/image.gif" />
      <CardText expandable>
        <div>
          <p>{message}</p>
        </div>
        <div>
          {tagElements}
        </div>
      </CardText>
    </Card>
  );
};

文件夹结构:

- app
-- assets
--- img
---- image.gif
-- src

我是否需要在每个要显示图像的js文件中导入某些内容?为什么我不能指向它所在的文件夹并显示它?我错过了什么?

2 个答案:

答案 0 :(得分:1)

在CardHeader组件中,您需要从react native导入Image组件,并将uri prop提供给要呈现的组件。这是documentation for image

<Image style={{width: 50, height: 50}} source={{uri: props.avatar}} />

本地反应的一个问题是,您需要为图像提供明确的宽度和高度,以便渲染。否则它显示为0x0。

所以CardHeader中的这样的东西会起作用:

In [25]: df = pd.DataFrame({'col1': ['SPAN 10300 or 20300', 'SPAN 10300 or 20301', 'MOGK 10100/30100', 'PHSC 12600 must be taken before PHSC 12620']}) In [26]: df.index = ['a', 'b', 'c', 'd'] In [27]: df Out[27]: col1 a SPAN 10300 or 20300 b SPAN 10300 or 20301 c MOGK 10100/30100 d PHSC 12600 must be taken before PHSC 12620 In [28]: df.col1.str.extract('(([A-Z]{4}\s*\d{5}?)|(\d{5}?)).*?(and|\-|or|\, or|\:|\/|\.|\;|\(|\s?)') /usr/local/bin/ipython:1: FutureWarning: currently extract(expand=None) means expand=False (return Index/Series/DataFrame) but in a future version of pandas this will be changed to expand=True (return DataFrame) #!/usr/local/bin/python3.5 Out[28]: 0 1 2 3 a SPAN 10300 SPAN 10300 NaN b SPAN 10300 SPAN 10300 NaN c MOGK 10100 MOGK 10100 NaN / d PHSC 12600 PHSC 12600 NaN In [29]: df.col1.str.extractall('(([A-Z]{4}\s*\d{5}?)|(\d{5}?)).*?(and|\-|or|\, or|\:|\/|\.|\;|\(|\s?)') Out[29]: 0 1 2 3 match a 0 SPAN 10300 SPAN 10300 NaN 1 20300 NaN 20300 NaN b 0 SPAN 10300 SPAN 10300 NaN 1 20301 NaN 20301 NaN c 0 MOGK 10100 MOGK 10100 NaN / 1 30100 NaN 30100 NaN d 0 PHSC 12600 PHSC 12600 NaN 1 PHSC 12620 PHSC 12620 NaN NaN

答案 1 :(得分:0)

您必须导入图像,然后使用它。在您的js文件标题中添加图像路径就足够了。示例:

import myimage from 'XXX/images/x.png';

然后您必须像这样显示它:

 <div className="myimage">
    <img src={myimage}  />
 </div>

让我知道它是否适合您。