The documentation for Next.js (found here) suggests placing image file paths under the public directory.
I have a component that successfully displays an image in my Next.js project, but it doesn't render properly within Storybook. The image file is currently located in public/images/
const renderImage = () => {
const portraitClassName = cx({
[styles.imageContainerPortrait]: true,
});
return (
<img
className={portraitClassName}
data-testid="image"
src="/images/portrait.png"
alt={image.imgAlt}
/>
);
};
This is the current configuration for 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;
}
Is there a missing piece that would enable me to display images in Storybook the same way they are set up in Next.js?