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?

I'm willing to bet it's because it is .jpeg and not ,jpg.

Decipher Me Please
– Decipher Me Please

2020-01-23 11:10:12 +00:00
Commented Jan 23, 2020 at 11:10 — Decipher Me Please
– Decipher Me Please, Commented Jan 23, 2020 at 11:10
i tried with different img with jpg, same error.

emas94
– emas94

2020-01-23 11:13:20 +00:00
Commented Jan 23, 2020 at 11:13 — emas94
– emas94, Commented Jan 23, 2020 at 11:13

Alberto S. · Accepted Answer · 2021-07-07 09:23:17Z

4

In my case, I was having problems with:

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

all I had to do was:

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

const withImages = require('next-images')

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

}

edited Jul 7, 2021 at 9:23

answered May 27, 2021 at 16:00

Alberto S.

2,18630 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aliton Oliveira Over a year ago

Still not working... error - ./assets/img/sidebar-2.jpg Module parse failed: Unexpected character '�' (1:0)

emas94 · Accepted Answer · 2020-01-23 11:27:22Z

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

answered Jan 23, 2020 at 11:27

emas94

1171 silver badge7 bronze badges

Comments

yohanes · Accepted Answer · 2021-01-19 15:50:36Z

2

First, install url-loader

$ yarn add url-loader --dev

Next, create a next.config.js at the root of your folder to extend webpack config like so:

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push(
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000' 
      }
    )
    return config
  },
}

Last, import your file and use it at your styled-components , and don't forget to restart your dev server.

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

...

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

Note: to use styled-components we need .babelrc at our root project as well

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

edited Jan 19, 2021 at 15:50

answered Jan 19, 2021 at 15:16

yohanes

2,7751 gold badge20 silver badges29 bronze badges

1 Comment

Aliton Oliveira Over a year ago

Still not working... error - ./assets/img/sidebar-2.jpg Module parse failed: Unexpected character '�' (1:0)

Burak Ayyildiz · Accepted Answer · 2020-01-23 11:08:28Z

1

Since you are importing a real image you canuse the template literals Do this to set the url :

On ES5 :

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

On ES6 -

backgroundImage: `url(${front})`

or

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

answered Jan 23, 2020 at 11:08

Burak Ayyildiz

4652 silver badges7 bronze badges

2 Comments

emas94 Over a year ago

all funcion is in template string, its styled component. Template started after styled.div and end after background-image: url('${front}');

emas94 Over a year ago

this same error is without code, even without style and <img/>

Arntor · Accepted Answer · 2021-09-17 07:23:30Z

1

I just had a similar problem and the cause appears to be that webpack doesn't know how to process your images and you need to tell it that those should be treated as resources.

So in the webpack.rules.js you need to add:

  {
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: 'asset/resource',
  },

answered Sep 17, 2021 at 7:23

Arntor

82610 silver badges13 bronze badges

1 Comment

Glenn 'devalias' Grant Over a year ago

Note that this appears to only work for Webpack v5+, not v4: webpack.js.org/guides/asset-modules

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related