Next.js - dynamic images

Question

I'm working with next.js and trying to get images dynamically like this:

{list.map((prod) => (
      <div className={styles.singleProduct}>
          <h6>{prod.Brand.toUpperCase()}</h6>
          <p>{prod.ProductName}</p>
          <img
              src={require(`../public/assets/products/${prod.ProductName
              .replace(" ", "-")}.png`)}
           /> 
       </div>
  ))}
   

With this code I get the following error: "./public/assets/products/Product-One.png 1:0 Module parse failed: Unexpected character '�' (1:0)"

When I hard code the image everything works, f.ex.:

... 
<img
    src={require(`../public/assets/products/Product-One.png`)}
/> 
...

So I suppose that I get the error because of the dynamic variable?! Could someone help me with the issue? Thanks a lot!

Answer 1

I was getting the same error for svg images so I use this package https://www.npmjs.com/package/react-inlinesvg. What this package does under the hood, it loads the image url during runtime as a data uri and then convert it to image format (in this case it does svg). After converting the image it uses the image as a react component and insert it as child.

Answer 2

So, with the help here especially from Alvaro I finally have the solution. The following code works:

src={`/assets/products/${prod.ProductName.replace(/ /g, "-")}.png`} 

or

src={"/assets/products/" + prod.ProductName.replace(/ /g, "-") + ".png"} 

It seems as "require" doesn't work well with variables.