[해결] dynamic import image path

Project.tsx

critical dependency the request of a dependency is an expression 에러

처음 하고자 했던건

json에 img path를 저장해두고 화면에서 바로바로 import해서 사용하고 싶었다.

<Card.Img variant="top" src={data.img_path} />

그냥 이렇게 사용하니 에러는 안나지만 이미지를 불러오지 못했고ㅠ

(webpack img설정은 모두 해줬고 dataset을 tsx로 바꿔 import를 미리 해주고 불러오는 것까지는 가능!)

 

다음으로 Project.tex 내에서 forEach로 import해주려고하니 이때부터

ritical dependency the request of a dependency is an expression 에러 발생 ㅠㅠ

 

여기서 부터 검색어를 잘못잡았던것같다.

해당에러를 해결하려고 하니 github issue에서 webpack문제이니 prettier문제이니...

나는 모두 다 사용하고 있어 원인 파악이 더욱 어려웠음 ㅠ

 

결국 돌고돌아 "react img path import in json"으로 검색하니 아래 링크가 나왔고

https://stackoverflow.com/questions/50115140/react-component-with-json-image-path

이것저것 시도해본 결과 성공!

 

<Card.Img src={require("assets/img/" + data.img_path).default} />
<Card.Img src={require(`${data.img_path}`).default} />
<Card.Img src={`${data.img_path}`} />
<Card.Img src={data.img_path} />

위 코드 중에 1번째만 동작한다.

2,3,4번은 모두 에러나 이미지를 불러오지 못함

 

아마 data.img_path를 문자열로 인식하지 못하는 것 같아 리터럴로 작성해보았으나

리터럴로 쓰면 빨간줄은 없지만 이미지를 불러오지 못했다.

결국 1번 코드로 해결!

 

데이터는 json파일로 하고싶은 마음에 이틀간 시간을 썼는데...

코드는 좀 맘에들지 않지만 해결했다는데 의의를 두기로 했다.

더 좋은 방법이 있으면 알려주세요 제발 ㅠㅠ

 

+) 2022.04.05 추가

ESLint에서 계속해서 에러를 뿜어내서 결국 다시 수정..ㅎㅎ

 

images 파일을 따로 생성하고 모든 이미지 파일 import.

컴포넌트에서는 images 안에 이미 import 되어있는 것을 가져오도록 변경했다.

import footballHome from 'assets/img/football/home.jpg';

import kdkdHome from 'assets/img/kdkd/kdkd_home.png';

import sgpgHome from 'assets/img/sgpg/4989.PNG';

type typeImages = {
  [key: string]: string;
};

const images: typeImages = {
  footballHome,
  kdkdHome,
  sgpgHome
};

export default images;

import dataset from 'assets/dataset/project.json';
import images from 'assets/img/images';

type ProjectModalProps = {
  dataIndex: number;
};

const ProjectModal = ({ dataIndex }: ProjectModalProps) => {
  const data = dataset[dataIndex];

  return (
    <Modal>
    	...
            <img
              style={{ width: '100%', aspectRatio: '3/2' }}
              src={images[data.img]}
              alt=""
            />
        ...
    </Modal>
  );
};

export default React.memo(ProjectModal);

 

참고한 사이트:

https://www.techighness.com/post/remove-eslint-warnings-for-dynamic-imports/

Remove Eslint Warnings For Dynamic Imports