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

标签 javascript reactjs webpack next.js urlloader

在我的 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" />

最佳答案

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

关于javascript - Next.js:你可能需要一个合适的加载器来处理这个文件类型,目前没有配置加载器来处理这个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68010719/

相关文章:

javascript - 为什么babel会把 "true"转成 "!0"

javascript - 如何在 if 语句 jQuery 中设置超时

javascript - React Native - 如何在背景图像上显示内容并垂直居中该内容

javascript - 在 React 中向组件添加新输入并跟踪状态

angularjs - 使用带有 angularJS (v1) 模板的 html-loader 和 Jest 失败

ruby-on-rails - 尝试使用 React 在 Rails 应用程序上设置 ruby​​ 时出现 yarn 问题

javascript - 如何让我的背景图像随光标移动?试图实现这个codepen

javascript - 无法注入(inject)自定义存储库

ios - React Native 入门示例中需要未知模块 "498"错误

reactjs - 如何将 React 用于各个站点组件