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

• 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

5 Answers 5

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