0

I am curious if there is more efficient and cleaner way to import picture1, picture2, picture3 and later use them in the img tags as well? In reality I have many more pictures and it is adding extra lines of code that I would love to avoid.

I am using pictures from picture.js like that:

import {
  picture1,
  picture2,
  picture3,
} from './picture';

<img src={picture1} />
<img src={picture2} />
<img src={picture3} />

My picture.js

import picture1 from './picture_1.jpg';
import picture2 from './picture_2.jpg';
import picture3 from './picture_3.jpg';

export {
  picture1,
  picture1,
  picture1,
};

Ideally would want to have something like that:

import pictures from './picture';

repeat <img src=picture[index]>
OFFLlNE
  • 747
  • 1
  • 8
  • 17

1 Answers1

0

You can import all pictures with *. and then use template string to access with index.

import * as pictures from './picture';

<img src={pictures[`picture${index}`]}
Amit Chauhan
  • 6,151
  • 2
  • 24
  • 37