title: Cant serve static files in NextJs + Storybook
body: <p>The nextjs docs (<a href="https://nextjs.org/docs/basic-features/static-file-serving" rel="nofollow noreferrer">https://nextjs.org/docs/basic-features/static-file-serving</a>) state to add image file paths under the <code>public</code> directory.</p>
  <p>I have a component that renders an image component and the file renders correctly on my nextjs project but doesn't render inside of storybook. The image file is currently living in <code>public/images/</code></p>
  <pre><code>const renderImage = () =&gt; {
      const portraitClassName = cx({
          [styles.imageContainerPortrait]: true,
      });
  
      return (
          &lt;img
              className={portraitClassName}
              data-testid=&quot;image&quot;
              src=&quot;/images/portrait.png&quot;
              alt={image.imgAlt}
          /&gt;
      );
  };
  </code></pre>
  <p>This is my current config file for storybook</p>
  <pre><code>webpackFinal: async (config) =&gt; {
          config.module.rules.push({
              test: /\.(scss|sass|css)$/,
              use: [
                  {
                      loader: &quot;sass-loader&quot;,
                      options: {
                          implementation: require(&quot;sass&quot;),
                      },
                  },
                  {
                      loader: &quot;postcss-loader&quot;,
                      options: {
                          ident: &quot;postcss&quot;,
                          plugins: [tailwindcss, autoprefixer],
                      },
                  }
              ],
              include: path.resolve(__dirname, &quot;../&quot;),
          });
          return config;
      }
  </code></pre>
  <p>Is there something missing that would allow me to render images in the same manner as how Nextjs is set up?</p>