如何解决Next.js:你可能需要一个合适的加载器来处理这个文件类型,目前没有配置加载器来处理这个文件
在 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。