Nextjs 11 新使用 import 关键字为图像 'src' 抛出错误 CompileError: mutable globals cannot be export

问题描述

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

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

然后使用可以将其用作

<Image src={mallImage} alt="image of person" />

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

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

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

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

解决方法

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

<Image src={"/images/ads/mall.png"} alt="image of person" layout={"fill"} />

或

<Image src={"/images/ads/mall.png"} alt="image of person" width={100} height={100} />