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

Question

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}');`

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?

Answer 1

In my case, I was having problems with:

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

all I had to do was:

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,
    },

}

Answer 2

WHAAAAAAAAAAAAAAAAAAT i restart VISUAL Studio Code and localhost and now its working. Arghhh i lost few hours!!!! haha thanks.

Turn off and on ist the best rule