background image not show (Remix with vanilla-extract)

[WreewanMorhee]

Every thing is fine if I write directly in inline style like above:

import playbtnimg from 'assets/images/ic_play_play.webp'

<div style={{backgroundImage: `url(${playbtnimg})`}}></div>

But But But
if I write the code below:

import { style } from '@vanilla-extract/css'
import playbtnimg from 'assets/images/ic_play_play.webp'

export const _VideoBox = style({
	width: '100%',

	'& .video-js': {
		'& .vjs-play-control': {
			backgroundImage: `url(${playbtnimg})`,
		},

	}
})

and the background image result show in real world will become:

background-image: url(/assets/images/play.webp)

Obviously, it didn't been handled (?)
why would this happen ?

Remix version: ^2.0.1
Vanilla-extract version: ^1.13.0

[doc-souhail]

in the first code it correctly references the image URL from the playbtnimg variable. but in the second you're trying to reference playbtnimg in a CSS module. but Vanilla Extract doesn't handle asset URLs in the same way as regular JavaScript.
try this in your css ;

module import { style } from '@vanilla-extract/css'
import playbtnimg from 'assets/images/ic_play_play.webp'

export const _VideoBox = style({
  width: '100%',

  '& .video-js': {
    '& .vjs-play-control': {
      backgroundImage: `url(${playbtnimg.default})`, // Use .default to get the URL
    },
  },
})

By using .default on the playbtnimg import, you can access the URL directly in the CSS module. This should resolve the issue and correctly reference the image URL.

[WreewanMorhee]

NO
.default doesn't save my problem

I surprising that nobody else encounter this problem ?!?!?!