I'm developing an application with Astro (v.4.0.8) and I encountered a problem I can't solve. I want to render the image and imported the particular svg and also the <Image> component from 'astro:assets' like this:
---
import Image from 'astro:assets'
import './Nav.scss'
import scrollimage from '../../../images/scroll.svg'
---
and I use them like this :
<div>
<Image
src={scrollimage}
alt="asd"
width={'30'}
height={'30'}
format="webp"
/>
</div>
...and it doesn't work. I receive the following error on the screen
Unable to render Image because it is undefined! Did you forget to import the component or is it possible there is a typo?
They use it in the same way in the docs. I keep my images in the src/images directory and the path to image is correct because when I cmd + click the scrollImage import then IDE brings me to the correct file.
Am I missing something? Any advice highly appreciated.
Ok I found the solution for this issue. I found on one of the gitHub threads that in order to fix my issue I had to install Sharp library by running
yarn add sharp --ignore-engines
Thanks for the comments above but they did not help :( I hope my answer will help someone! :)