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

admin管理员组

文章数量:1241162

i was started learning about styled ponents 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 was started learning about styled ponents 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?

• javascript
• css
• reactjs
• next.js

Share Improve this question Follow asked Jan 23, 2020 at 11:01 emas94emas94 11711 silver badge77 bronze badges 2

• I'm willing to bet it's because it is .jpeg and not ,jpg. – Decipher Me Please Commented Jan 23, 2020 at 11:10
• i tried with different img with jpg, same error. – emas94 Commented Jan 23, 2020 at 11:13

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

In my case, I was having problems with:

import logo from "@pany/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,
    },

}

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

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-ponents , 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-ponents we need .babelrc at our root project as well

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

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}")`

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

本文标签： javascriptNextjs Import image error Module parse failed Unexpected character 39�39 (10)Stack Overflow