Next.js - 动态图像答案

【问题标题】：Next.js - dynamic imagesNext.js - 动态图像
【发布时间】：2021-03-10 23:13:15
【问题描述】：

我正在使用 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 模块解析失败：意外字符 '�' (1:0)"

当我对图像进行硬编码时，一切正常，f.ex.：

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

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

【问题讨论】：

你在使用 Webpack 加载器来处理图片吗？
我正在使用来自 create-next-app 的 webpack 的默认配置。我是新开发的，所以我没有改变任何东西。这是一个可能有帮助的链接：nextjs.org/docs/api-reference/next.config.js/…
另外我正在使用下一个图像：npmjs.com/package/next-images
您可以尝试使用字符串吗：require("../public/assets/products/" + prod.ProductName.replace(" ", "-") + ".png")
能分享一下 next.config.js 代码吗？不严格相关，但 .map 的根元素缺少键。设置一个看看有没有帮助<div key={prod.ProductName} className={styles.singleProduct}>

标签： javascript next.js

【解决方案1】：

我在 svg 图像上遇到了同样的错误，所以我使用这个包 https://www.npmjs.com/package/react-inlinesvg。这个包在后台做了什么，它在运行时将图像 url 作为数据 uri 加载，然后将其转换为图像格式（在这种情况下它是 svg）。转换图像后，它将图像用作反应组件并将其作为子组件插入。

【讨论】：

【解决方案2】：

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

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

或

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

似乎“require”不适用于变量。

【讨论】：

很高兴你能解决它。作为参考，在 require 路径的开头设置已知路径，并可能在这种情况下使用字符串的原因解释为here。