React에서 가져온 긴 목록 피하기

Question

React (Create React App 사용)에서 만드는 SET 게임의 경우 게임에 사용 된 81 개의 가능한 카드를 나타내는 81 개의 이미지 파일을 가져와야합니다. 파이썬 스크립트의 도움으로, 나는 수입

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

을이 매우 긴 목록을 작성하고 내가 각 카드를 나타내는 문자열을 사용하여 해당 변수를 참조 할 필요가 있기 때문에,이 개체가 :

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

을 좋은 점은 지금은 모든 카드 이미지가

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

쉽게 호출 할 미리로드 그러나 나쁜 것은 내가 그것을 작동하게 말도 안되는 코드의 164 개 라인을 가지고있다 가지고있다. 나는 이미지를 가득 담은 디렉토리를 사전 캐시하고 참조하는 더 좋은 방법이 있는지 궁금합니다.

Answer 1

모든 이미지를 public 폴더로 이동하십시오 (예 : public/cards).

그런 다음 문을 사용하여 import 문을 사용하지 않고 참조 할 수 있습니다.

참조 된 이미지가 누락되었다고 경고 할 수 없으므로 Webpack에서 더 이상 경고 메시지가 표시되지 않으므로 해당 이미지가 있는지 확인하십시오.

Answer 2

두 가지 접근 방법 :

첫째, 당신은 수동으로 다음과 같은 코드를 struturing하여 심판 객체를 생성을 없애기 :

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

:

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

을 그리고 당신은 이러한 자산을 사용하고자하는 경우 둘째, 동적 요구 사항을 지원하는 번들링 시스템을 사용할 수 있습니다. https://webpack.github.io/docs/context.html#dynamic-requires