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`)}
/> 
...

所以我想我因為動態變量而得到錯誤？ 有人可以幫我解決這個問題嗎？ 非常感謝！

Answer 1

對於 svg 圖像，我遇到了同樣的錯誤，所以我使用這個 package https://www.npmjs.com/package/react-inlinesvg 。 這個 package 在幕后做了什么，它在運行時將圖像 url 作為數據 uri 加載，然后將其轉換為圖像格式（在這種情況下它是 svg）。 轉換圖像后，它將圖像用作反應組件並將其作為子組件插入。

Answer 2

所以，在阿爾瓦羅的幫助下，我終於有了解決方案。 以下代碼有效：

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

或者

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

似乎“要求”不適用於變量。