title: How to use <img src="./"> in React with Webpack?
body: <p>I need to create an array of div (with the image inside).</p>
  <p><a href="https://i.stack.imgur.com/zeMJc.png" rel="nofollow noreferrer">My code so far:</a></p>
  <pre><code>let slides = sliderData.map(() =&gt; {
    let advantagesList = advantages.map((adv) =&gt; {
      return(
        &lt;li key={adv.id}&gt;
          {adv.name}
        &lt;/li&gt;
      );
    });
  
    return (
      &lt;div key={id}&gt;
        &lt;span&gt;{name}&lt;/span&gt;
        &lt;ul&gt;
          {advantagesList}
        &lt;/ul&gt;
        &lt;img data-src src=&quot;./img/1.jpg&quot; alt={alt} /&gt;
      &lt;/div&gt;
    );
  });
  </code></pre>
  <p>My images are in the same folder as the component. How can I insert the correct src to make the webpack work properly? (without &quot;import&quot; because the path to the image will come from the server and the slide is formed by map)</p>
  <p>Maybe i need to use &quot;html-loader&quot; in my webpack.config.js, but i don't know how..
  I try but it doesn't work.</p>
  <p><a href="https://i.stack.imgur.com/V2C1G.png" rel="nofollow noreferrer">Here's my webpack.config.js:</a></p>
  <pre class="lang-js prettyprint-override"><code>// Loading HTML
  {
    test: /\.html$/,
    loader: &quot;html-loader&quot;,
    options: {
      sources: {
        list: [
          {
            tag: 'img',
            attribute: &quot;data-src&quot;,
            type: &quot;src&quot;
          }
        ]
      }
    }
  }
  </code></pre>