리엑트에서 이미지 경로 설정하기

1. public

: process.env.PUBLIC_URL 사용 

 

const App = () => {
   return (   
       <img src={process.env.PUBLIC_URL + '/myImagePath.jpg'} /> 
   ); 
};  
export default App;

 

 

2. import

: 파일 최상단에 사용하려는 모든 이미지를 import해서 사용하는 동기적인 방법

 

import myImage from './assets/myImage.jpg';  
const App = () => {  
   return (   
      <img src={myImage} />  
   ); 
};  
export default App;

 

3. require 

: default 를 붙이는 이유는 require를 사용하면 객체 형태로 값이 리턴되기 때문에, default 를 붙이면 문자열 형태 그대로 인식되게 만들어줌

 

const App = () => {  
   return (   
      <img src={require('./assets/myImage.jpg').default} />  
   ); 
};  
export default App;

 

 

그러나 이미지 경로 설정할 때 가끔 이러한 에러가 발생한다.

 

Cannot find module ..... or its corresponding type declarations

 

이럴 경우, react-app-env.d.ts 파일을 삭제해서 생긴 문제였고 다시 복구해주면 된다.

 

/// <reference types="react-scripts" />

 

이 파일은 무슨 역할을 하고 있었길래 삭제했을 때 이런 에러를 발생시키는 걸까?

node-modules/react-scripts/lib/react-app.d.ts경로에 들어가면 이러한 내용들이 있다. 

이미지와 스타일 관련된 파일 확장자들에 대한 타입이 선언되어 있다! 

 

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.avif' {
  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

 

 

 

출처

https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a

[React] 리액트에서 이미지 경로 설정하기 (public, src 디렉토리 차이)

https://code-anthropoid.tistory.com/275

d.ts // its corresponding type declarations.

https://velog.io/@rimo09/React-Create-react-app-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C%EB%A5%BC-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-4%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95

[React] Create-react-app 프로젝트에서 이미지 경로를 설정하는 4가지 방법