Question

nextjs docs（https://nextjs.org/docs/basic-features/static-file-serving）声明在vue-create-app目录下添加图像文件路径。

我有一个可以渲染图像组件的组件，并且该文件可以在我的nextjs项目上正确渲染，但是不能在Storybook内部渲染。该图像文件当前位于public

中

public/images/

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

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

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

是否缺少一些东西，可以让我以与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

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

1 个答案: