[BUG] in styled jsx loaders not apply to images

[MaxmaxmaximusGitHub]

i have files
/pages/_App.js
/res/images/image.jpg

export default function App() {

  // language=Stylus
  return <style jsx global>{ `
	body {
		background-image: url("../res/images/image.jpg");
	}
  ` }</style>
}

Problem

url("../res/images/image.jpg") will not replace to /_next/static/images/lol-c8bbed083d312e8f1cccb6069d6f7919.png. styled jsx not applied webpack loaders, and not create optimized next.js assets

Temporary solution

export default function App() {

  // language=Stylus
  return <style jsx global>{ `
	body {
		background-image: url(${ require("../res/images/image.jpg") });
	}
  ` }</style>
}

[jamesmosier]

You'll have to either import (or require) the image as you have in your second example or place the image in the public folder as mentioned in the docs

[timneutkens]

Closing as answered. Please follow the issue template in the future. I've asked you this multiple times now in the issue tracker.

[MaxmaxmaximusGitHub]

@jamesmosier @timneutkens

if i use webepack base 64 loader, for svg icons, then render component with jsx styles generate 10kb+ style text? every render iteration? if i use 10 png icons by 10kb, i create 100kb style text by every render?

next js cool framework, and your recommendations are wonderful =)

or place the image in the public folder as mentioned in the docs

the images in this folder are source, and do not go through webpack processing and are not suitable for production. hashes are not added to their names, they are not stuck together into single sprites, etc. These are raw files not processed by webpack. such files are called sources.

it is unacceptable to use raw files directly; all assets must always be imported through the webpack system.

[MaxmaxmaximusGitHub]

temporary solution:

import css from 'styled-jsx/css'
import icon from 'res/images/icon.svg'

export default function Box() {
  return <div className='box'>
    <style jsx>{ style }</style>
  </div>
}

// language=Css
const style = css`
  .input-panel {
    background-image(${ icon })
  }
`

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.