Next.js 导入图像错误模块解析失败：意外字符“？” (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

由于您要导入真实图像，因此可以使用模板文字执行此操作来设置 url ：

在 ES5 上：

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

在 ES6 上 -

backgroundImage: `url(${front})`

或者

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