How to Build an Astro.js Image Component on Vercel

Published on

NaN

1 min read--- views

Astro.js Image Component

When I built my linktree website I forgot to use Image component in Astro.js.
I used the img tag instead. So after learning about the Image component in Astro.js, I decided to add it.

<Image src={UserProfileImage} densities={[1, 2]} width="160" height="160" quality="max" alt="Serhii Shramko is eating pizza." />

And what do you think? It's works locally, but when I deployed it on Vercel, I got an error.

Astro Image doesn't work on Vercel

How to Fix the Error

Searching... 🔎

Powerful ChatGPT?
No, I found the solution on old and good GitHub.
And a little bit of documentation.

astro.config.mjs
// Update astro.config.mjs with image service export default defineConfig({ image: { service: sharpImageService(), } });
// Install sharp package pnpm add sharp

Done and deployed. Now it works perfectly on Vercel.

Astro Image works on Vercel

How I built my linktree website you can read in my previous article.

Share it: