Nextjs 11 新使用 import 关键字对 image 'src' 抛出错误 CompileError: mutable globals cannot be exporting

Posted 2023-03-06

【中文标题】Nextjs 11 新使用 import 关键字对 image \'src\' 抛出错误 CompileError: mutable globals cannot be exporting

【英文标题】：Nextjs 11 new use of import keyword for image 'src' throwing error CompileError: mutable globals cannot be exportedNextjs 11 新使用 import 关键字对 image 'src' 抛出错误 CompileError: mutable globals cannot be exporting

【发布时间】：2021-09-04 09:31:11

【问题描述】：

我最近升级到 nextjs 11 并使用了他们的新图像功能，您可以在其中导入图像并在 src 属性中使用它们，如下所示：

import mallImage from '../public/images/ads/mall.png';

然后use可以作为

<Image src=mallImage  />

它工作正常，直到它开始抛出错误

./public/images/ads/mall.png
CompileError: AsyncCompile: Wasm decoding failed: mutable globals cannot be exported @+482

我很困惑，因为我完全按照文档中的使用方式使用它 https://nextjs.org/blog/next-11#image-improvements

这个错误似乎只发生在开发服务器上

【问题讨论】：

你不需要参考公用文件夹。接下来会为你做。使用import mallImage from '../images/ads/mall.png';

那没用，它给了Module not found: Can't resolve '../images/ads/mall.png'，因为它正在尝试像正常反应一样导入图像

不确定wasm-pack，但这个东西在 create-next-app (webpack) 配置中工作得很好。 @Randall One 需要在导入时引用公用文件夹。如果他们使用字符串作为 src，则不需要它，在这种情况下，/images/ads/mall.png 就足够了，但这不适用于新的静态图像功能（自动高度/宽度扣除 & placeholder=blur 不提供 @ 987654331@).

@brc-dd，我通过更改图像解决了这个问题，之前的图像是从photoshop的快速导出png导出的，然后我用tinypng.com压缩它，也许图像以某种方式重建，但现在它工作正常，因为我将其转换为 jpg

我遇到了完全相同的问题。我在构建我的应用程序时遇到了问题。我尝试了很多不同的东西，我尝试将文件名直接放在 Image 标签中，我尝试导入图像并将对象添加到 Image 标签中，我尝试了 img 标签。没有任何工作。我无法重新创建我的图像，因为它们是我的 UX 团队提供给我的

【参考方案1】：

解决方案：不要像 react 一样导入。试试这个

<Image src="/images/ads/mall.png"  layout="fill" />

或

<Image src="/images/ads/mall.png"  width=100 height=100 />