How can I serve images from a subdirectory path (/public) at the root path (/) with webpack server?

Question

I am developing components with Playroom for use in a Next.js application. Right now, I am trying to figure out how to configure Webpack to resolve the following inconsistency:

1. I use Next.js for my application, so I need to write <img src="/image.jpeg"> and background-image: url("/image.jpeg") to display an image stored at public/image.jpeg relative to the project root. (reference to docs on this)

2. However, Playroom appears to resolve <img> src paths and background-image: url(...) paths from the root of the project. I need to use either <img src="public/image.jpeg"/> or background-image: url('public/image.jpeg') to display the image stored at public/image.jpeg

3. This makes the paths for my images in the Playroom environment incompatible with the paths that images need to resolve properly in the Next.js environment.

Ideally, I would like all image paths starting with / to resolve to paths starting with /public in the Playroom environment. For example, /image.jpeg would resolve to /public/image.jpeg

Playroom exposes an option for providing custom webpack config. How can I use this config to accomplish the above behavior, and resolve this issue?