Next/Image を使った png 画像が storybook 上で表示されない問題への対処法

Next.js の Next/Image を利用しているコンポーネントを storybook で表示しようとしたところ、 png 画像が表示されませんでした。（以下のような状態。

Devtools の Network タブで見ても、404 が返ってきていました。

なぜかsvg 画像は問題なく表示されていましたが…。

対応策としては、以下の dev.to の記事コメントで解決しました。

Didn't work for me either. What worked for me is providing defaultProps with ... - DEV Community

.storybook/preview.jsx に以下のコードを追加。

import Image from 'next/image';

Image.propTypes = {
  unoptimized: null,
};

Image.defaultProps = {
  unoptimized: true,
};

※本記事執筆時点でのパッケージバージョンは以下のとおりです。

{
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",

    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-vite": "^0.1.39",
    "@storybook/mdx2-csf": "^0.0.3",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
}