[React] react에서 이미지 엑박이 뜰 때

img태그를 이용해서 로고 이미지를 삽입하려는데 이상하게 자꾸 깨진 파일로 표현되었다.

처음에는 경로를 잘못 지정했나 하고 이리저리 바꾸어보았지만 전혀 소용이 없었고, 결국 상대경로를 뭔가 실수하고 있나 싶어 절대경로로 지정해보았지만 이 마저도 실패.

뭔가 이상해 여기저기 검색해보며 시도해봤다.

'png파일을 인식하지 못한다 => jpg로 변경', '상/하위 폴더안에 넣어서 해야한다 => x', '이미지 파일에 문제 => 다른 이미지로 교체' 등등 온갖 방법을 시도하다, 문득 react를 초기에 실행하고 불필요한 파일을 삭제할 때 있었던 import logo ... 이 생각났다.

찾아보니 react에서 img파일을 사용하기 위해선 import문을 사용하면 된다고 한다.

 

import img from "경로";
...
<img src={img} />

 

그런데 이렇다면 삽입할 이미지의 개수가 늘어나면 import문이 너무 많아져 더러워진다.

이럴 때에는 

images

+1.png

  2.png

  imgIdx.js

 

<imgIdx.js>

import 1 from "./1.png";
import 2 from "./2.png";

const img = {
	1,
    2
}

export default img;

 

<main.js>

import React from "react";
import img from "../images/imgIdx.js";

...
	<img src={img.1} />
    ...

 

이런식으로 사용할 수도 있고,

 

아니면 위의 <imgIdx.js>와 같은 작업 없이

 

<main.js>

...
	<img src={require(`../images/1.png`).default}/>
    ...

 

이처럼 require 함수를 통해 구현할 수도 있다.

이 경우에는 require을 통해 전달하기 때문에 default를 붙여 객체가 아닌 string으로 반환하도록 해야한다.

require을 사용하면 간편하나 불필요한 이미지 등을 불러올 수도 있기 때문에 잘 고려해서 사용해야한다.

 

 

---

 

이후에 작업을 하면서 알게되어 정리해두었던 사실인데,

import문을 사용하는 방식은 src파일에 이미지 파일이 위치할 경우에 사용되는 방식이고,

만일 import문을 사용하고 싶지 않다면 루트폴더 아래에 있는 public폴더에 이미지 파일을 위치시키면 된다고 한다.

 

<public 폴더에 img_.png 파일이 위치할 경우>

<img src="/img_.png" />

 

<public 폴더 하위에 img라는 폴더를 만들어 위치시켰을 경우>

<img src="/img/img_/png" />