以阵列形式导入图像

Question

我尝试在React中将图像导入数组中，但未显示图像。如果我只想单独显示它们，所有作品都可以

import ich from '../car.jpg';
import mauri from '../mauri.png';

export class Home extends React.Component {
 constructor() {
 super();
 this.state = {
    checked: false,
    bilder: [{car},{mauri}]
    };
   this.handleChange = this.handleChange.bind(this);
  }

  [...]
    <Row>
    {this.state.bilder.map((bild,i) =>        
      <Col xs={4} md={3} lg={3} key={i}>
          <Image src={bild} key={i} thumbnail />
      </Col>
    )}
    </Row>

Answer 1

您可以阅读here如何正确使用所需的图像：

 this.state = {
    checked: false,
    bilder: ["../car.jpg", "../mauri.png"]
    };
   this.handleChange = this.handleChange.bind(this);
  }

对于组件：

    <Row>
    {this.state.bilder.map((bild,i) =>        
      <Col xs={4} md={3} lg={3} key={i}>
          <Image src={require(bild)} key={i} thumbnail />
      </Col>
    )}
    </Row>

Answer 2

将bilder: [{car},{mauri}]更改为bilder: [car,mauri]。

state = {
    checked: false,
    bilder: [car,mauri]
    };

...
<Row>
  {this.state.bilder.map((bild,i) =>        
    <Col xs={4} md={3} lg={3} key={uniqueColKey(i)}>
      <Image src={bild} key={uniqueImgKey(i)} thumbnail />
    </Col>
  )}
</Row>

此外，请查看示例：