Astro Image/img works locally but not on Vercel - build creates wrong path for img src

[andre-rd-rodrigues]

What version of astro are you using?

2.7.2

Are you using an SSR adapter? If so, which one?

Vercel

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chome

Describe the Bug

None of the images are working, except when using the background property. Here's an example of the component containing the two imports:

---
import { Image } from '@astrojs/image/components';
import CTA from './common/CTA.astro';

export const prerender = true;

---

<div
  class="relative bg-[url('/images/salon.jpg')] bg-cover bg-center bg-no-repeat h-screen flex flex-col justify-center items-center"
>
  <div class="absolute inset-0 bg-black/75"></div>
  <Image
    src={import('~/assets/images/homepage-logo.png')}
    class="animation"
    width={500}
    height={500}
    aspectRatio="16:9"
    alt="Barber Studio"
    format="png"
  />
  <h1 class="hidden">Barber Studio</h1>
</div>

In production:

Locally

So in this case, the background shows the image since it has the correct path, but Image component is giving an error in production, deployed on Vercel. This is the wrong path from the image src: https://barberstudio-jet.vercel.app/_image?f=png&w=500&h=500&href=%2F_astro%2Fhomepage-logo.183ae1e9.png

You can check the website here: https://barberstudio-jet.vercel.app/ My git repo: https://github.com/andre-rd-rodrigues/barberstudio

I've searched a lot online and this seems to be a known issue, but none of the solutions worked. I'm using this template: https://astro.build/themes/details/astroship/ so you can check the full configuration package.json.

I've changed to node 16 both in Vercel and locally, I've tried many different imports from Astro docs and I've serviceEntryPoint: '@astrojs/image/sharp' in astro.config file, even tried with img tag and by fetching the image from a CDN, but none worked, the path keeps being transformed into this_image thing.

Any thoughts on how to fix this?

What's the expected result?

This is the expected result:

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-h27owa?file=src%2Fpages%2Findex.astro

Participation

• [X] I am willing to submit a pull request for this issue.

[natemoo-re]

Thanks for the report! Is there any chance you're able to try out the astro:assets feature rather than the @astrojs/image package? That will hopefully work better since it has a tighter integration with Vercel's built-in image service.

[matthewp]

Your reproduction doesn't include Vercel. Am I missing something?

[matthewp]

@astrojs/image has been removed from Astro. You should begin migrating over to astro:assets instead which is our Image component going forward. Thanks!

[navi-05]

Using the astro::assets provide same error for me, works fine locally, but when pushed into production with vercel, this is the URL I'm getting in the network tab: /_image?href=%2F_astro%2Fhero.Y0ectNeh.png&f=webp

[mbe-setpoint]

Same problem for me. No images shown when using eg:

import { Image } from "astro:assets";
import linkedInLogo from "../assets/logos/linkedin.png";

in the frontmatter and then

<Image class="w-6 h-6 grayscale" src={linkedInLogo} alt="LinkedIn Logo"/>

[mbe-setpoint]

Found this: https://stackoverflow.com/questions/76588673/astrojs-image-works-locally-but-not-on-vercel

I was missing: adapter: vercel({ imageService: true }), in my astro.config.mjs

Now it works on Vercel