Next.js：您可能需要适当的加载器来处理此文件类型，当前没有配置加载器来处理此文件

Question

我在 Next.js 应用程序中从本地目录加载图像时收到以下错误

\n

编译失败\n./pages/components/image.png 1:0\n模块解析失败: 意外字符 \'\xef\xbf\xbd\' (1:0)\n您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders \n（此二进制文件省略源代码）

\n

我安装了这个加载器

\n

$ npm install file-loader --save-dev\n

\n

我的 webpack.config.js

\n

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

\n

};

\n

我的 next.js 代码

\n

import homeBG from \'./image.png\'\n<Image src={homeBG} alt="Picture of the author" />\n

\n

Answer 1

我只是通过使用这个包next-images解决了这个错误

npm install --save next-images

或者

yarn add next-images

在项目中创建 next.config.js

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

在您的组件或页面中只需导入您的图像：

import img from './my-image.jpg'

export default () => <div>
  <img src={img} />
</div>

或者

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>