아니 왜 이미지 주소가 두번 반복되지?

 

메이플 동아리 소개 페이지를 Github Pages로 배포했다. 그런데 어떤 이미지는 렌더가 되고

어떤 이미지는 뜨지 않았다. 문제 없이 나왔으면 제대로 알고 가지 못했을 뻔 했는데 어쩌면 다행이었다.

 

어디갔니?

 

경로에 hufs_maple이 두번 나온다. 경로에 hufs_maple이 두번 나온다.

 

 

 

정말 막막했지만 다행히 먼저 같은 시행착오를 겪은 선배님이 쓰신 글을 보고 쉽게 해결할 수 있었다.

 

전 

/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,
  images: {
    loader: "akamai",
    path: "https://aingface.github.io/hufs_maple" ,
  },
  assetPrefix: "/hufs_maple";,
};

 

images.path가 먼저 나오고 assetPrefix가 나오기 때문이라고 한다. 

전의 코드를 보면 경로가 2번 나오는 이유를 알 수 있다.

 

후

/** @type {import('next').NextConfig} */

const isProduction = process.env.NODE_ENV === "production";
const productionURL = "https://aingface.github.io";
const productionPath = "/hufs_maple";

module.exports = {
  reactStrictMode: true,
  images: {
    loader: "akamai",
    path: isProduction ? productionURL : "https://localhost:3000",
  },
  assetPrefix: isProduction ? productionPath : "",
};

 

다음과 같이 고쳤다.

 

 

참고 : 

https://velog.io/@juunini/next.config.js-%EC%9D%98-images.path%EC%99%80-assetPrefix