[storybook-nextjs] How to host storybook in a sub folder, while serving static nextJS public/images?

[caroparo]

Summary

In the development env, npm run storybook works fine using "npx storybook@latest init" and I got some stories working.

However, now I'm trying to npm run build-storybook, wanting to get the output storybook-static folder to serve from vscode Live Server: the static images don't work when the src is for example "/images/icon.jpg" as works in NextJS's static public/ folder.

I was able to launch Live Server if storybook-static/ is the server root, but that's not what I wanted.
Eventually I'd like to host the /storybook-static/ project as a subfolder of my local web server.

I've tried to modify the .storybook/main.js setup, to include a production staticDirs config:

  staticDirs: ((process.env.NODE_ENV === "development")
    ? ["../public"]
    : [{ from: "../public", to: "/"}]),

And also tried to modify my next.config.js to include:
basePath: (process.env.NODE_ENV === "development") ? '' : '/storybook-static',

While the copy works, they don't seem to help storybook resolve the path "/images/icon.jpg".

I'm totally new to NextJS, storybook and webpack. Could someone please help me figure out what I'd need to configure?
Or let me know if it's something not possible to do?

Do I need to change the way <Image src="/images/icon.jpg" /> is coded in the NextJS component, for example prepending a public runtime config basePath string to it?

Any insight would be appreciated. Thanks.

Additional information

I'm using
"@storybook/nextjs": "^8.4.7",
"storybook": "^8.4.7"

Create a reproduction

No response

[caroparo]

This seems to be a web server issue and not much related to storybook. I was able to use webpack to include a string for prefixing the static image paths and only them.