[next.js] 로컬 image 를 불러오는 여러가지 방법

react 에서 next.js 를 사용해서 포트폴리오를 제작중인데....로컬 이미지를 가져오는데서 막혔다.

next.js 에서 로컬 이미지를 어떻게 가져오는지를 알아보자...

 

---

 

우선 next.config.js 파일을 추가한다.

const withImages = require('next-images');
module.exports = withImages();

next.config.js 파일을 가장 최상위 루트에 생성하여 다음과 같은 코드를 추가한다.

next-images를 install 해주지 않았다면, 우선 설치하자~ 

 

이걸 추가하면 이제 로컬에서 이미지 파일을 import로 불러올 수도 있고, require 로 불러올 수도 있다.

 

 

- import 로 불러오기

import ExImage from '../public/img/ExImage.jpg';

불러오고자 하는 이미지 파일을 이렇게 불러온다.

<img src={ExImage} alt='이미지 테스트' />

그리고 src 안에 이렇게 import 해준 걸 넣어주면 끝!

 

 

- require 로 불러오기

<img src={require('../public/img/ExImage.jpg')} />

이렇게 이미지 태그 src 안에 require를 넣어줘서 불러오는 방법도 있다.

 

 

- 그냥 src 로 불러오기 (에러가 나는 이유)

내 프로젝트의 파일 구조는 이러했다.

 

📁public
 ㄴ 📁img

      ㄴ 어쩌구이미지.jpg...

 

그랬기 때문에 난 img src 주소를 이렇게 적어주었었다.

 

<img height={200} src='../public/img/ExImage.jpg' />

아놔 근데 이미지가 깨져보이는 거에요...

 

 

왜지? 경로 맞는데...

require 나 import 로 불러올때 이 주소로 불러오면 정상으로 나온다. 그런데 왜..왜 안나왔을까...?

 

그건 바로 next.js 에서 assets 파일을 불러올 때... 자동으로 public 폴더부터 경로를 잡고 움직인다고 한다 ..

(라는 글을 읽었는데 하도 구글링을 많이해서 어디서 찾았는지 기억이 안난다ㅠㅠㅠ 내가 이해하기론 그런 글이었다)

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ... 얼탱이...  

 

아무튼 그래서 경로를 적어줄때 📁public 경로는 패스하고 적어줘야 했다.

 

<img height={200} src='/img/ExImage.jpg' />

이렇게 적어주면 이미지가 아주 잘 나올 것이다 ㅎㅎ

 

참고로 내가 import 와 require 를 통해 이미지를 불러오지 않은 이유는

 

내가 직접 작성한 json 데이터에서 이미지명만 불러와서 이미지를 변경하고 싶었기 때문이다 !!!!!!!!!

 

그런데 require 로 이렇게 불러오면

<img src={require(`../public/img/${item.img}.jpg`)} />

모듈 에러메세지...

이런 에러메세지가 자꾸~~ 자꾸 뜨는거다ㅠㅠㅠㅠㅠ

백틱 안에 '' 를 안써줘서 그런가... 싶어서 넣어줘도 봤고, 변수로 만들어서 넣어줘도 봤고 

 

별의 별 쇼를 해도 저 에러 메세지에서 벗어날 수가 없었다.

(에러 메세지에서 웹팩 로더 얘기가 나와서 검색해서 나오는거 다 추가해봤는데 안되더라 😭)

 

그래서 이미지가 뜨진 않지만...에러 메세지가 나타나진 않는 보통 src 경로로 어떻게 할 수 없나 구글링하다가

저 방법을 알아낸 것이다.

<img height={200} src={`/img/${item.img}.jpg`} />

이렇게 넣으면 데이터가 들어가니 얼마나 편한...ㅎㅎㅎ

 

 

암튼, 오늘도 에러와 삽질을 했다...

 

public 폴더를 기본 경로에서 바꿀 수 있을 거 같은데... 나중에 한번 도전해봐야겠다.

next.config.js 에서 제어할 수 있지 않을까...? 🤔🤔🤔🤔🤔