javascript - Next.js - 动态图像

Question

我正在使用 next.js 并尝试像这样动态获取图像：

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

使用此代码，我收到以下错误：“./public/assets/products/Product-One.png 1:0 Module parse failed: Unexpected character '�' (1:0)”

当我对图像进行硬编码时，一切正常，例如：

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

所以我想我是因为动态变量而得到错误？！有人可以帮我解决这个问题吗？非常感谢！

标签： javascriptnext.js

Answer 1

所以，在阿尔瓦罗的帮助下，我终于有了解决方案。以下代码有效：

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

或者

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

似乎“要求”不适用于变量。