Does not work with images created at runtime

[flyotlin]

I have a Next.js app with CMS that can upload images, save images locally, and then display images on Next.js again.

I found that Next.js does not show images created at runtime, only images that exist at build time. So I tried this module. static file serving

I first set up next.config.js like this:

const withTM = require("next-transpile-modules")(["@fullcalendar"])
const withImages = require("next-images")

module.exports = withImages(
    withTM({
        async rewrites() {
            return [
                {
                    source: "/api/:slug*",
                    destination: "http://golang:5000/api/:slug*",
                },
            ]
        },
    })
)

then I try to show my images with absolute url like this:

<img
   className="d-block w-100"
   src={require("/src/static" + url)}
/>

But it turns out not working, and shows An unexpected error has occurred..

Does anyone has any idea on why it does not work?