title: Next.js - dynamic images
body: <p>I'm working with next.js and trying to get images dynamically like this:</p>
  <pre><code>{list.map((prod) =&gt; (
        &lt;div className={styles.singleProduct}&gt;
            &lt;h6&gt;{prod.Brand.toUpperCase()}&lt;/h6&gt;
            &lt;p&gt;{prod.ProductName}&lt;/p&gt;
            &lt;img
                src={require(`../public/assets/products/${prod.ProductName
                .replace(&quot; &quot;, &quot;-&quot;)}.png`)}
             /&gt; 
         &lt;/div&gt;
    ))}
     
  </code></pre>
  <p>With this code I get the following error: &quot;./public/assets/products/Product-One.png 1:0
  Module parse failed: Unexpected character '�' (1:0)&quot;</p>
  <p>When I hard code the image everything works, f.ex.:</p>
  <pre><code>... 
  &lt;img
      src={require(`../public/assets/products/Product-One.png`)}
  /&gt; 
  ...
  </code></pre>
  <p>So I suppose that I get the error because of the dynamic variable?! Could someone help me with the issue? Thanks a lot!</p>