typescript - Kan inte servera statiska filer i NextJs + Storybook

Nextjs-dokumentationen (https://nextjs.org/docs/basic-features/static-file-serving) säger att man ska lägga till bildfilsvägar under katalogen public.

Jag har en komponent som renderar en bildkomponent och filen renderas korrekt i mitt Next.js-projekt men renderas inte i Storybook. Bildfilen ligger för närvarande i public/images/

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

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

Detta är min nuvarande konfigurationsfil för storybook

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;
    }

Finns det något som saknas som skulle tillåta mig att rendera bilder på samma sätt som Nextjs är uppsatt?

Svar #1

Du behöver tala om för Storybook var dina bilder finns. I nextjs ligger de i public/ så du kan bara lägga till -s ./public i ditt skript för att köra Storybook:

//package.json
{
"scripts": {
    "start-storybook": "start-storybook -s ./public"
  }
}

Här är dokumentationslänken för referens: https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook

Svar #2

Det som fungerade för mig var att jag behövde tala om för storybook.js var mina publika resurser fanns, genom att använda staticDirs.

d.v.s.: root > .storybook-katalog > main.ts

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

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

};
export default config;

Relaterade artiklar