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.我想将图像导入我的背景，但导入有问题.我看了一些教程，人们没有这个问题，他们的项目看起来像我的.我想要这样的导入图像

i was started learning about styled components and next.js. I want import image to my background but i have problem with import. I watched a few tutorial and people dont have this problem where they projects looks like mine. i want import image like that

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

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

I want try use this import file in my background-image

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

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

and also i tried include this import to IMG

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

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

but in both way i have the same error

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

They are basic things and i lost too much time to find resolve. What is wrong?

推荐答案

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

In my case, I was having problems with:

从@company/shared-library/media/logo.png"导入徽标

我所要做的就是:

1. 安装 npm 包next-images
2. 在项目的根目录下创建一个 next.config.js
3. 编辑 next.config.js 使其看起来像:

1. install the npm package next-images
2. Create a next.config.js at the root of your project
3. Edit next.config.js so it looks like:

const withImages = require('next-images')

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

}

这篇关于Next.js Import image error Module parse failed: Unexpected character ' ' (1:0)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！