无法在 NextJs + Storybook 中提供静态文件

Question

nextjs 文档 ( https://nextjs.org/docs/basic-features/static-file-serving ) 声明在public目录下添加图像文件路径。

我有一个渲染图像组件的组件，该文件在我的 nextjs 项目上正确渲染，但不在故事书内渲染。图像文件当前位于public/images/

const renderImage = () => {
    const portraitClassName = cx({
        [styles.imageContainerPortrait]: true,
    });

    return (
        <img
            className={portraitClassName}
            data-testid="image"
            src="/images/portrait.png"
            alt={image.imgAlt}
        />
    );
};

这是我当前的故事书配置文件

webpackFinal: async (config) => {
        config.module.rules.push({
            test: /\.(scss|sass|css)$/,
            use: [
                {
                    loader: "sass-loader",
                    options: {
                        implementation: require("sass"),
                    },
                },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: [tailwindcss, autoprefixer],
                    },
                }
            ],
            include: path.resolve(__dirname, "../"),
        });
        return config;
    }

是否缺少某些东西可以让我以与 Nextjs 的设置方式相同的方式渲染图像？

Answer 1

对我有用的是我需要使用staticDirs告诉Storybook.js我的公共资源所在的位置。

即： root > .storybook目录 >main.ts

const config: StorybookConfig = {
 //other stuff .... 
  docs: {
    autodocs: 'tag',
  },

  staticDirs: ['../public/'], //<--- FIX    };

};
export default config;

Answer 2

您需要告诉故事书在哪里可以找到您的图像。在nextjs他们停留在public/，所以你可以只需添加-s ./public到您的脚本运行童话故事：

//package.json
{
"scripts": {
    "start-storybook": "start-storybook -s ./public"
  }
}

这里的文档链接供参考：https : //storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook