Netlify/Cloufflare Pages Build Fails to Import Images | Astro Lounge | Page 1

While build succeed locally via npm run build, all builds fail on both Netlify and Cloudflare Pages when importing images:

[vite]: Rollup failed to resolve import /public/assets/images/Tropical-leaves.png from /opt/build/repo/src/components/ImageOverlay.astro.
1:57:57 AM: This is most likely unintended because it can break your application at runtime.
1:57:57 AM: If you do want to externalize this module explicitly add it to
1:57:57 AM: build.rollupOptions.external
1:57:57 AM: error [vite]: Rollup failed to resolve import /public/assets/images/Tropical-leaves.png from /opt/build/repo/src/components/ImageOverlay.astro.
1:57:57 AM: This is most likely unintended because it can break your application at runtime.
1:57:57 AM: If you do want to externalize this module explicitly add it to
1:57:57 AM: build.rollupOptions.external

Here is the ImageOverlay.astro component:

---
const {src, backgroundColour} = Astro.props;
import {Image} from "@astrojs/image/components";
import flowersOverlayImage from "/public/assets/images/Tropical-leaves.png";
---

<div class="image-overlay">
    <Image class="image-overlay-image" src={src ?? flowersOverlayImage} alt=""/>
    <slot/>
</div>

<style define:vars={{backgroundColour}}>
    .image-overlay {
        background-color: var(--backgroundColour, hsla(120, 77%, 17%, 0.288));
        display: grid;
        grid-template-areas: 1;
        place-items: center;
    }
    .image-overlay-image {
    }
</style>

I have verified that the images exist in the corresponding paths in the Git repository.

Do I need to use relative image paths for Netlify or Cloudflare Pages to build successfully?

How can I import image assets to successfully deploy my astro app on either Cloudflare Pages or Netlify?

#Netlify/Cloufflare Pages Build Fails to Import Images