如何在带有 Webpack 的 React 中使用 <img src="./"> ？

问题描述

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

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

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

也许我需要在 webpack.config.js 中使用“html-loader”，但我不知道如何.. 我试过了，但没用。

Here's my webpack.config.js:

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

解决方法

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