#Astro Image error

6 messages · Page 1 of 1 (latest)

tribal lily
#

Hello Astro community, I'm working on a buisness site for a friend. Implemented a image slider via CSS and now I thought it would be a great idea to let Astro optimize the images. Sadly I get a internal server error (500).

Code:

---
import { Image } from 'astro:assets';
import Allianz from '@assets/insurance-provider/allianz.png';
---

<div class="insurance-slider">
    <!-- WORKS - same path -->
    <div class="item item1"><img src="src/assets/insurance-provider/allianz.png" alt="Logo of Allianz Insurance"></div>

    <!-- Error 500 -->
    <div class="item item1"><Image src={Allianz} alt="Logo of Allianz Insurance"></div>

...
</div>

Normal img elements load fine. I hope someone can point me to the issue.. 🙂

analog cape
#

If you go on the url with the image, you should get an error in the console with more details

#

Quite likely the problem here is that you're using pnpm and require to install sharp manually in your project

tribal lily
#

Now the console tells me that Sharp is not installed, is that not the case by default?

#

Had to install Sharp via npm - thanks!