Can't import static files like images

version: v2.1.1

additional webpack config to next.config.js:

config.module.rules.push(
        {test: /\.(png|jpeg)$/, loader: 'url-loader?limit=8192'}
    )

then in my component: import image from '../static/enen.png'

it comes the error:

This module was not found:

* /static/enen.png in ./pages?entry

To install it, you can run: npm install --save /static/enen.png
{ Error: Cannot find module '/static/enen.png'
...

I have tried to change the url as ‘/static/enen.png’ , and in the css-in-jsx:

p {
  background-image: url('../static/enen.png')
}
//or
p {
   background-image: $(require('../static/enen.png'))
}

all above comes the same error: can’t find the module, I can get it using <img src="../static/enen.png"/>

hope your help.

[jpsc]

If you add the image to the /static/ and then add the <img src="/static/image.png"/>? There is no need to load the image via the import.

[arunoda]

@paulobarcelos it’s not a strong opinion. With our SSR setup, it’s kind a hard to it. (Since we don’t run webpack in the server) It’s doable, but we’ve much important other stuff to do.

@laoqiren why it’s not working simply use the image path like this:

background-image: url("/static/my-image.png")