最新更新

它现在从next@v11.0.1. 无需遵循以下步骤。

暂时禁用静态图像功能作为解决方法：

// next.config.js

module.exports = {
  images: {
    disableStaticImages: true
  }
}

更新：这已在next@11.0.1-canary.4 中得到修复。安装它：

$ npm install next@canary

请参阅相关问题和PR。

禁用静态导入

- 从 10.0.0 版本开始，Next.js 内置了图像组件和自动图像优化

默认行为允许您从 './icon.png 导入静态文件，例如导入图标，然后将其传递给 src 属性。在某些情况下，如果此功能与期望导入行为不同的其他插件冲突，您可能希望禁用此功能。您可以使用以下配置禁用静态图像导入。

  // next.config.js
  
  images: {
        disableStaticImages: true
    }

我刚刚从 webpack (next.config.js) 中删除了我的图像/css 加载器配置，它开始工作了。

在next.config.js你可以添加文件类型检查和处理程序。我知道可以通过放置以下代码并下载 npm 包@svgr/webpack 来处理 svg，因此可能有一个 .png 等效项

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

一个可以工作的例子是这个堆栈溢出的代码

module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
      ],
    }
};

我知道这个答案不是 100%，但希望它会有所帮助

查看 GitHub 存储库中的问题修复静态图像的类型它现在可以工作

https://github.com/vercel/next.js/pull/25808

  module.exports = {
  images: {
    disableStaticImages: true
  }
}