typescript - 无法在 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

您需要告诉故事书在哪里可以找到您的图像。
在 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