Image Data does not work
TheDarkThief opened this issue · comments
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
- Go to line 14 of the sandbox and see that the hello world element has no background image
- Scroll down to line 34 and see how setting the image source to an element prop works and displays the image
- 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
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>