Portfolio

문제

다음과 같이, next/Image에서 외부 이미지를 불러올 수 없다는 문제 현상이 발견되었다.

해결

해당 부분은 공식 문서에서 해결 방법을 발견했다.

쉽게 말해서

혹은 loader이라는 것을 설정함으로써 해결할 수도 있다.

A custom function used to resolve URLs. Setting the loader as a prop on the Image component overrides the default loader defined in the images section of next.config.js.

A loader is a function returning a URL string for the image, given the following parameters:

src

width

quality

그러나 경로를 여전히 인식하지 못하는 현상 발생!

next.config에서만 2시간을 날렸다가... 안 됐다.

그러다 생각해보니, 이건 스토리북 오류가 아닐까 생각했다. 스토리북은 실제로 다른 개발 서버에서 동작하기 때문이다.

따라서, 확인해보니, 다음과 같은 이슈 글이 있었고, 해결 방법을 찾았다.

원인은, storybook에서 따로 webpack을 설정해줘야 했다는 것이었다.

따라서 이를 추가했다.


config.plugins.push(
  new webpack.DefinePlugin({
    'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
      deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
      imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
      domains: ['picsum.photos', 'localhost'],
      path: '/',
      loader: 'default',
    }),
  })
);

에러는 제거됐지만... 불러올 수 없는 현상 발생!

이제는 alt만 나오게 됐다. src가 불러와지지 않는 것이었다.

원인을 찾아보니, 이것은 next/image에 대한 스토리북의 호환성으로 인한 이슈였다.

스토리북에서는 next/image와 충돌하는 이슈가 발생한다. 따라서 이는 unoptimized하는 방법으로 해결할 수 있다고 한다.


const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />,
});

이번에는 `block`이 먹지 않는 현상 발생!

아무래도 원인은, NextImage의 default에 block이란 것이 제대로 적용되지 않는 듯했다.

따라서 다음과 같이 해결했다.


Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => <img {...props} unoptimized />,
});

결과

비록 next/image 그대로의 효과는 볼 수 없지만... 그저 테스트 용도로서의 이미지를 완성하였다.

참고 자료

https://nextjs.org/docs/messages/next-image-unconfigured-host

https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

https://github.com/vercel/next.js/issues/18393

https://stackoverflow.com/questions/64622746/how-to-mock-next-js-image-component-in-storybook

Storybook Issue - Image Invalid src Prop

문제

해결

그러나 경로를 여전히 인식하지 못하는 현상 발생!

에러는 제거됐지만... 불러올 수 없는 현상 발생!

이번에는 block이 먹지 않는 현상 발생!

결과

참고 자료

이번에는 `block`이 먹지 않는 현상 발생!