Import images in array

Question

i tries to import images in an array in React, but the images are not shown. If i want to display them just alone, all works

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

You can read here how to use required images correctly:

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

And for the component:

    <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

Change bilder: [{car},{mauri}] to 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>

Moreover, check out the example: