Some Images are failing

[exotic zinc]

I am converting an existing static template for Vercel ScrewFast from static to ssr , some of the images fail to load with an error

Failed to load resource: the server responded with a status of 504.

The Vercel deployment logs show that the image is on the deployment server, but some images work and some don’t

src="/_image?href=%2F_astro%2Fhero-image.DRPoHq2O.avif&f=avif"

This is the src URL that is not working. For the file named

/_astro/hero-image.DRPoHq2O.avif

Vercel
"astro": "^4.11.5" vesion using

[patent plover]

Looks like something is escaping your urls. How are you using the images?

[exotic zinc]

@patent plover
import { Image } from "astro:assets";

// Define props from Astro
const {
title,
subTitle,
primaryBtn,
primaryBtnURL,
secondaryBtn,
secondaryBtnURL,
withReview,
avatars,
starCount,
rating,
reviews,
src,
alt
} = Astro.props;

// Define TypeScript interface for props
interface Props {
title: string;
subTitle?: string;
primaryBtn?: string;
primaryBtnURL?: string;
secondaryBtn?: string;
secondaryBtnURL?: string;
withReview?: boolean;
avatars?: Array<string>;
starCount?: number;
rating?: string;
reviews?: string;
src?: any;
alt?: string;
}

[patent plover]

That doesn't show how you are using them, just how you are passing them.
However, src should not be any. It should be one of:

• src?: ImageMetadata
• src?: string
• src?: ImageMetadata | string
  depending on what you are doing.

[exotic zinc]

Ok

[patent plover]

Are you using Content Collections? If so, are you using the image() helper function to define images in your schema?

And are you using the <Image /> component to render those images?

If you can provide more information, then we can provide better help.

[exotic zinc]

<Image
src={src}
alt={alt}
class="h-full w-full scale-110 object-cover object-center"
draggable={"false"}
loading={"eager"}
format={"avif"}
/>

It works once I set the , export const prerender = true; to make the header section static

Also using Vercel-

[patent plover]

OK. To be clear though, using export const prerender = true; doesn't make the header section static, it makes the page static, meaning it will be generated at build time.

With Vercel, I believe you have to install Sharp explicitly even though Astro has it as a dependency. Also, there were some version incompatibility issues, but I'm not sure if that's still the case. I suggest you search Vercel and sharp and see what you can find.
In any case, you should also read up on using images with Vercel:
https://docs.astro.build/en/guides/integrations-guide/vercel/#imageservice