How to Build an Astro.js Image Component on Vercel

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.

How to Fix the Error

Searching... 🔎

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

// 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.

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

New to Astro? Check out my comprehensive Astro Framework guide to get started.