how to dynamically render images in nextjs/react - reactjs

Question

i am trying to map through an array of images and render in a nextjs app.
const style = {
backgroundImage: `url("${require(`/${post.images}`)}")`,
};
I get this error message:
./public/tech1.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
./public/tech2.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
./public/tech3.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
next.config.js
const withImages = require("next-images");
module.exports = withImages();
I can render an image but not dynamically, like this:
backgroundImage: `url("${require(`/tech2.jpg`)}")`,
Please how can I resolve this?