как динамически отображать изображения в nextjs/react

Question

Я пытаюсь отобразить массив изображений и отобразить в приложении nextjs.

  const style = {
    backgroundImage: `url("${require(`/${post.images}`)}")`,
  };

Я получаю это сообщение об ошибке:

./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();

Я могу визуализировать изображение, но не динамически, например:

 backgroundImage: `url("${require(`/tech2.jpg`)}")`,

Пожалуйста, как я могу это решить?