Avoiding a long list of imports in React

Question

For a SET game that I am creating in React (using Create React App), I need to import 81 image files representing the 81 possible cards used in the game. With the help of a Python script, I created this extremely long list of imports

import i0000 from './assets/0000.png'
import i0001 from './assets/0001.png'
[...]
import i2221 from './assets/2221.png'
import i2222 from './assets/2222.png'

and since I will need to reference those variables using strings representing each card, I have this object:

const refs = {
  '0000': i0000,
  '0001': i0001,
  [...]
  '2220': i2220,
  '2221': i2221,
  '2222': i2222
};

The good thing is that now I have all the card images pre-loaded to be called easily with

<img src={refs[card]} />

But the bad thing is I have 164 lines of ridiculous code that make it work. I'm wondering if there is a better way to pre-cache and reference a directory full of images.

Would you be able to use anything like this? They use a feature of webpack to import all images from a directory. https://stackoverflow.com/a/42118921/9104680 — Derek Hopper, Dec 31 '17 at 03:08
Hop this helps https://stackoverflow.com/questions/48560592/is-it-possible-to-import-a-group-of-images-as-an-array-create-react-app-projec/48561549#48561549 — Jayavel, Feb 03 '18 at 08:16

Roy Wang · Answer 1 · 2017-12-31T03:08:12.960

0

Move all the images to your public folder, say public/cards.

Then you can reference them with <img src={`cards/${card}.png`} /> without the need for any import statement.

Webpack can no longer warn you if the referenced images are missing though, so just make sure they are there.

edited Dec 31 '17 at 03:08

answered Dec 31 '17 at 02:42

Roy Wang

10,260
2
13
34

Won't that mean that the images aren't pre-cached? – wbruntra Dec 31 '17 at 02:50
`webpack` simply bundles imported images into `public/static/media` (default). In the generated html code, the images will be referenced in the same way as the above code (except different directories and filenames). You can observe this by going to your browser's `Network` tab and refresh your page. – Roy Wang Dec 31 '17 at 03:01
I don't think the standard Create React App setup does this (at least if we are talking about the same public folder than contains `index.html`), although I take your point that setting up webpack to process the files would be a good way to solve the problem I am having above. – wbruntra Dec 31 '17 at 03:19

score 0 · Answer 2 · answered Dec 31 '17 at 03:09

0

Two approaches:

First, you eliminate manually creating the refs object by struturing your code like this:

export i0000 from './assets/0000.png'
export i0001 from './assets/0001.png'

And where you want to use these assets:

imports * as refs from './assets'
<img src={refs[card]} />

Secondly, you could use a bundling system that supports dynamic requires e.g. https://webpack.github.io/docs/context.html#dynamic-requires

answered Dec 31 '17 at 03:09

gunn

7,959
2
22
23

On your first point, I'm getting tripped up by the refs object because at the time that I am trying to render the image, all I have access to is a string representing the card. So the export is a variable named `i0000` but card is `'0000'`. How can I relate the two? – wbruntra Dec 31 '17 at 03:18
Like this: `` – gunn Dec 31 '17 at 04:43

Avoiding a long list of imports in React

2 Answers2