reactjs - 如何在 React 中与 Webpack 一起使用？

Question

我需要创建一个 div 数组（里面有图像）。

到目前为止我的代码：

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>
  );
});

我的图像与组件位于同一文件夹中。如何插入正确的 src 以使 webpack 正常工作？（没有“导入”，因为图像的路径将来自服务器，幻灯片由地图形成）

也许我需要在我的 webpack.config.js 中使用“html-loader”，但我不知道如何......我尝试但它不起作用。

这是我的 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>
        );
    });