时间戳

首页 > 解决方案 > Next.js Import image error Module parse failed: Unexpected character '�' (1:0)

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

问题描述

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

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

错误

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

标签： javascriptcssreactjsnext.js

解决方案

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

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

我所要做的就是：

  1. 安装 npm 包next-images
  2. next.config.js在项目的根目录创建一个
  3. 编辑next.config.js使其看起来像：
const withImages = require('next-images')

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

}

推荐阅读