Next.js:您可能需要一个合适的加载程序来处理此文件类型，目前没有配置任何加载程序处理此文件

Question

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

编译失败./pages/components/image.png 1:0模块分析失败：意外字符"�'(1:0(您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理该文件。看见https://webpack.js.org/concepts#loaders(此二进制文件省略了源代码(

我安装了这个加载程序

$ npm install file-loader --save-dev

我的webpack.config.js

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

}；

我的next.js代码

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

Answer 1

我只是通过使用这个包的下一个图像来解决这个错误

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>