Image Data does not work

[TheDarkThief]

Description

When setting the background image with a imported it fails to acquire the URL and silently fails

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-srx4pd?file=src%2FApp.tsx

Steps to reproduce

1. Go to line 14 of the sandbox and see that the hello world element has no background image
2. Scroll down to line 34 and see how setting the image source to an element prop works and displays the image
3. See error

JS Framework

React (TS), Vite (TS/JSX)

Panda CSS Version

0.34.1

Browser

Firefox, Brave

Operating System

• macOS (cannot test)
• Windows
• Linux

Additional Information

No response

[Segun Adebayo]

This is a known limitation of Panda due to our static extraction approach.

Think of it this way: there's no way for the compiler to know what the final asset URL will be since Vite controls it.

I recommend moving the imported backgroundImage to the style attribute.

      <p
        className={css({
          padding: '4',
          fontFamily: 'Inter',
          fontWeight: 'bold',
          color: 'pink.500',
          backgroundRepeat: 'repeat',
          w: '100vw',
        })}
        style={{
          backgroundImage: myImageBackground,
        }}
      >
        Hello World
      </p>