How to use in React with Webpack?

Question

I need to create an array of div (with the image inside).

My code so far:

let slides = sliderData.map(() => {
  let advantagesList = advantages.map((adv) => {
    return(
      <li key={adv.id}>
        {adv.name}
      </li>
    );
  });

  return (
    <div key={id}>
      <span>{name}</span>
      <ul>
        {advantagesList}
      </ul>
      <img data-src src="./img/1.jpg" alt={alt} />
    </div>
  );
});

My images are in the same folder as the component. How can I insert the correct src to make the webpack work properly? (without "import" because the path to the image will come from the server and the slide is formed by map)

Maybe i need to use "html-loader" in my webpack.config.js, but i don't know how.. I try but it doesn't work.

Here's my webpack.config.js:

// Loading HTML
{
  test: /\.html$/,
  loader: "html-loader",
  options: {
    sources: {
      list: [
        {
          tag: 'img',
          attribute: "data-src",
          type: "src"
        }
      ]
    }
  }
}

Answer 1

let slides = sliderData.map(({id, alt, imgName, name, advantages}) => {
        let advantagesList = advantages.map((adv) => {
            return(
                <li key={adv.id}>
                   {adv.name} 
                </li>
            );
        });

        const src = require(`./img/slider/${imgName}`).default; // this helped me

        return (
            <div className='slide-wrapper' key={id}>
                <div className="slide">
                    <div className="left_side">
                        <div className="slide_descr">
                            <span className='slide_descr_title'>{name}</span>
                            <ul className='slide_descr_list'>
                                {advantagesList}
                            </ul>
                        </div>
                        <button className="slide_btn">
                            дізнатися <br/> 
                            більше
                        </button>
                    </div>
                    <div className="right_side">
                        <div className="slide_img">
                            <img src={src} alt={alt}/>
                        </div>
                    </div>
                </div>
            </div>
        );
    });