Next.js集成Storybook后无法渲染PNG/JPEG格式图片求助

问题详情 #

• 异常表现：Storybook中仅SVG格式图片能正常展示，PNG、JPG格式图片显示为破损状态（如导航栏PNG Logo无法加载）
• 集成操作：通过npx storybook@next init命令完成Next.js与Storybook的自动集成
• 参考文档：Storybook官方Next.js自动集成教程

当前配置文件 #

.storybook/main.ts #

import type { StorybookConfig } from '@storybook/react-webpack5'
const config: StorybookConfig = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    "storybook-addon-next-router"
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
}
export default config

.storybook/preview.ts #

import type { Preview } from '@storybook/react'
import { RouterContext } from 'next/dist/shared/lib/router-context'
import '../styles/global.css'

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'white',
    },
    nextRouter: {
      Provider: RouterContext.Provider,
    },
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
}

export default preview

解决方法 #

问题根源在于Storybook默认的Webpack配置未正确处理PNG/JPG这类图片资源，需手动添加对应资源加载规则：

修改.storybook/main.ts，新增webpackFinal配置项，配置Webpack处理图片资源：

import type { StorybookConfig } from '@storybook/react-webpack5'
const config: StorybookConfig = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    "storybook-addon-next-router"
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
  // 新增Webpack图片处理配置
  webpackFinal: async (config) => {
    config.module?.rules?.push({
      test: /\.(png|jpe?g|gif)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'static/media/[name].[hash][ext]',
      },
    });
    return config;
  },
}
export default config

额外检查项 #

1. 确保组件中图片引用路径正确：图片放在public目录下时，直接使用根路径（如/logo.png）引用即可，无需额外导入
2. 若使用next/image组件，需安装storybook-addon-next插件并启用，确保Storybook支持该组件的渲染逻辑

内容的提问来源于stack exchange，提问作者Juicio