how to us the assetPrefix option of the next-images npm package

Question

I am using the next-images package in my nextJS application. (https://www.npmjs.com/package/next-images)

The documentation says:

You can serve remote images by setting assetPrefix option

However when I set the assetPrefix option in the next.config.js file, the whole next JS app stops working.

Becuase it adds the prefix to absolutly everything:

If I don't use the assetPrefix option and put the image file locally everything works.

I want to be able to serve a remote image from my component like this:

    <section className="text-center section-34 section-sm-60 section-md-top-50 section-md-bottom-50 bg-image-breadcrumbs"
        style={{ backgroundImage: "url(" + `${require("http://asorockfood.local/media/0v0ahz21/bg-image-breadcrumbs-default.png")}` + ")"}}>

Am I miss understanding how this feature works?

This is what my next.config.js looks like:

module.exports = withImages({
    assetPrefix: 'http://asorockfood.local',
    dynamicAssetPrefix: true,
    reactStrictMode: true,
    images: {
            disableStaticImages: true,
            remotePatterns: [
            {
                protocol: "http",
                hostname: "**",
            },
            {
                protocol: "https",
                hostname: "**",
            },
        ],
    },
    env: {
        customSnipcartJS: fs.readFileSync('public/custom-snipcart.js').toString(),
        snipcartInstallJS: fs.readFileSync('public/snipcart-install.js').toString()
    }
})