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

我只是用这个包解决了这个错误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>

Next.js: 您可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来处理这种文件

Next.js: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

javascript

urlloader

reactjs

webpack

next.js

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

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