다수의 이미지 파일을 관리할 때 어떻게 하나요?

다수의 이미지를 상태값에 맞게 불러오려고 하는데
require()는 변수를 담을 수 없어
방법이 객체 형태로
{ a: require(‘a.png’), b: reuiqre('b.png") } 이런식으로 불러와서 써야 하더라구요

이럴경우 이미지가 추가되면 객체도 수정해야하는 번거러움이 있는데요
어떤식으로 관리하나요?

폴더안에 이미지 파일들을 읽어서 오브젝트로 묶어주는 스크립트를 작성해서 쓰고있습니다.

그 말씀은 디렉토리를 읽어서
{ a: require(‘a.png’), b: reuiqre('b.png") }
이런 형태의 객체로 변환하는 모듈 또는 함수를 만들어 사용하신다는건가요?
그럴 경우 value 값이 String 처리가 되어 require가 함수로써 실행 될 수 있나요? 저도 생각해봤는데
특정 폴더의 이미지를 읽어와 foreach나 for문을 돌려
{
a: “require(‘a.png’)”,
b: “reuiqre(‘b.png’)”
}

이런식으로 만들어질 텐데 그럴경우 require의 함수를 실행할 수 있나요?

아니면 다른 방법이 있으신건가요? 공유좀 부탁드립니다 ㅠ

네 디렉토리를 읽어서 전체 리스트를 오브젝트 형태의 스트링으로 읽어오고, require의 따옴표는 정규식으로 제거한 뒤, 전체 따옴표 제거하고 파일로 write 해서 쓰고 있습니다.

좋아요 1

그냥
const ImageSource = {
0: require(’./assets/image.png’),
1: require(’./assets/image1.png’),
2: require(’./assets/image2.png’),
3: require(’./assets/image3.png’),
}
이런식으로 만드셔서 ImageSource[0] 이런식으로 불러오셔도 되죠

좋아요 1