Framework: Next.js App Directory
Language: TypeScript
Library: spin-wheel
Description: I am encountering an issue when trying to use the image and overlayImage fields in the spin-wheel library. The specific error message I receive is:
Error: Wheel.image must be a HTMLImageElement or null
Steps to Reproduce:
Implement the spin-wheel library in my Next.js application.
Attempt to set the image and overlayImage fields with images using the new Image() constructor.
Observe the error when trying to render the wheel.
Current Workaround: I have tried to initialize the image using a function to create a new HTMLImageElement and assign it to the props. However, I encountered a bug where the image does not display on the first load. Instead, it only appears after a few seconds, and only after clicking on the wheel.
Environment:
Framework: Next.js App Directory Language: TypeScript Library: spin-wheel Description: I am encountering an issue when trying to use the image and overlayImage fields in the spin-wheel library. The specific error message I receive is:
Error: Wheel.image must be a HTMLImageElement or null
Steps to Reproduce:
Implement the spin-wheel library in my Next.js application. Attempt to set the image and overlayImage fields with images using the new Image() constructor. Observe the error when trying to render the wheel. Current Workaround: I have tried to initialize the image using a function to create a new HTMLImageElement and assign it to the props. However, I encountered a bug where the image does not display on the first load. Instead, it only appears after a few seconds, and only after clicking on the wheel.
Repository: You can find my source code here: Lucky Wheel Next
Expected Behavior: I expect the images to load properly on the initial render without needing to click on the wheel.
Additional Information: If you need further information or details, please let me know. I appreciate your help!