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

Posted 2023-02-19

【中文标题】无法在 NextJs + Storybook 中提供静态文件

【英文标题】：Cant serve static files in 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/…)

【参考方案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