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

【问题标题】：Cant serve static files in NextJs + Storybook无法在 NextJs + Storybook 中提供静态文件
【发布时间】：2021-01-09 00:02:57
【问题描述】：

nextjs docs (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 的方式相同的方式呈现图像？

【问题讨论】：

您能告诉我您的图像没有在故事书中呈现的原因吗？我猜你遇到了 404 错误，尝试在 Storybook 中运行时设置assetPrefix (nextjs.org/docs/api-reference/next.config.js/…)

标签： typescript webpack next.js storybook

【解决方案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

【讨论】：