javascript - Next.js 导入图片报错 Module parse failed : Unexpected character '�' (1:0)

Question

我开始学习样式化组件和 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="" />

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



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

Answer 1

就我而言，我遇到了以下问题: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,
    },

}