تایپاسکریپت - نمیتوان فایلهای ایستا را در NextJs + Storybook سرو کرد

مستندات 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 تنظیم شده است، نمایش دهم؟

پاسخ شماره ۱

شما باید به استوریبوک بگویید تصاویر شما را از کجا پیدا کند. در 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

پاسخ شماره ۲

چیزی که برای من جواب داد این بود که نیاز داشتم به storybook.js بگویم منابع عمومیام کجا قرار دارند، با استفاده از staticDirs.

یعنی: ریشه > .storybook دایرکتوری > main.ts

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

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

};
export default config;