Astro Image error | Astro Lounge | Page 1

tribal lily Oct 11, 2024, 7:02 AM

#

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 Oct 11, 2024, 7:09 AM

#

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 Oct 11, 2024, 7:11 AM

#

Hello Erika! 🙂

it points me to https://docs.astro.build/en/reference/errors/local-image-used-wrongly/. But I dont get why the import should be wrong. As the HTML elements can load it.

My tsconfig also includes this:

"@assets/*": ["src/assets/*"]

#

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

#

Had to install Sharp via npm - thanks!

#Astro Image error