Storybook上で画像が表示できなかった際の対処

概要

会社の研修でNext.js＋Storybookに触れる機会があったのですが、
その際にStorybook上でロゴ等の画像が表示できず詰まったので、備忘録としてメモしておきます。

開発環境

• next.js 11
• Storybook

修正

Next.jsでの画像表示にはいくつか方法がありますが、
今回はnext/imageを使用する方法で画像を表示することにしました。

preview.jsを修正

以下の記事を参考にコードを追加
storybook next/image エラー解決：next.config.jsにドメイン設定してもダメ

• 修正前

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

• 修正後

import * as nextImage from 'next/image';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

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

package.jsonを修正

storybookを起動するときのscriptがデフォルトの状態だと表示できなかったので、修正します。

• 修正前

"storybook": "start-storybook -p 6006",

• 修正後

"storybook": "start-storybook -s ./public -p 6006",

以上の修正を行うことで、無事Storybook上で画像を表示できるようになりました。