Next.js Import image error Module parse failed: Unexpected character '�' (1:0)答案

【问题标题】：Next.js Import image error Module parse failed: Unexpected character '�' (1:0)Next.js Import image error Module parse failed: Unexpected character '�' (1:0)
【发布时间】：2020-05-09 15:15:37
【问题描述】：

我开始学习样式化组件和 next.js。我想将图像导入我的背景，但导入时遇到问题。我看了一些教程，人们没有这个问题，他们的项目看起来像我的。我想要这样的导入图像

import front from "../img/front.jpeg"

我想尝试在我的背景图像中使用这个导入文件

    const HomeTop = styled.div`
  height: 80%;
  width: 100%;
  background-image: url('${front}');`

我也尝试将此导入包含到 IMG

 <img src={front} alt="" />

但在这两种方式我都有相同的错误

它们是基本的东西，我浪费了太多时间来寻找解决方案。怎么了？

【问题讨论】：

我敢打赌这是因为它是 .jpeg 而不是 ,jpg。
我尝试使用不同的 img 和 jpg，同样的错误。

标签： javascript css reactjs next.js

【解决方案1】：

由于您正在导入真实图像，因此您可以使用模板文字这样做来设置网址：

在 ES5 上：

backgroundImage: "url(" + front + ")"

在 ES6 上 -

backgroundImage: `url(${front})`

或

backgroundImage: `url("${front}")`

【讨论】：

所有功能都在模板字符串中，它的样式组件。模板在 styled.div 之后开始，在 background-image 之后结束： url('${front}');
同样的错误是没有代码，即使没有样式和

【解决方案2】：

WHAAAAAAAAAAAAAAAAAAT 我重新启动 VISUAL Studio Code 和 localhost，现在它可以工作了。啊，我失去了几个小时！！！！哈哈谢谢。

关闭再打开是最好的规则

【讨论】：

【解决方案3】：

首先，安装url-loader

$ yarn add url-loader --dev

接下来，在文件夹的根目录下创建一个next.config.js 来扩展webpack 配置，如下所示：

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push(
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000' 
      }
    )
    return config
  },
}

最后，导入您的文件并在您的 styled-components 使用它，不要忘记重新启动您的开发服务器。

import front from "../img/front.jpeg"

...

const HomeTop = styled.div`
  height: 80%;
  width: 100%;
  background-image: url(${front});
`;

注意：要在我们的根项目中使用styled-components，我们还需要.babelrc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

【讨论】：

还是不行...error - ./assets/img/sidebar-2.jpg Module parse failed: Unexpected character '�' (1:0)

【解决方案4】：

就我而言，我遇到了以下问题：

import logo from "@company/shared-library/media/logo.png"

我所要做的就是：

安装npm包next-images
在项目的根目录下创建next.config.js
编辑next.config.js，使其看起来像：

const withImages = require('next-images')

module.exports = {
    ...withImages(),
    future: {
        webpack5: true,
    },

}

【讨论】：

还是不行...error - ./assets/img/sidebar-2.jpg Module parse failed: Unexpected character '�' (1:0)

【解决方案5】：

我刚刚遇到了类似的问题，原因似乎是 webpack 不知道如何处理您的图像，您需要告诉它应该将这些图像视为资源。

所以你需要在 webpack.rules.js 中添加：

  {
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: 'asset/resource',
  },

【讨论】：