#trying to deploy in vercel but my statics img donts appear.
1 messages · Page 1 of 1 (latest)
Hi @ivory coyote. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
It seems like you're experiencing a common issue with Astro and Vercel where static images aren't displaying correctly. This issue has been reported by several users on Astro's GitHub page.
One possible solution is to use the astro:assets feature instead of the @astrojs/image package. This feature has a tighter integration with Vercel's built-in image service and might solve your problem. Here's how you can use it:
import { Image } from "astro:assets";
import linkedInLogo from "../assets/logos/linkedin.png";
Then, in your frontmatter, you can use it like this:
<Image class="w-6 h-6 grayscale" src={linkedInLogo} alt="LinkedIn Logo"/>
Also, make sure to include adapter: vercel({ imageService: true }), in your astro.config.mjs file.
If you're still experiencing issues, it's worth noting that the @astrojs/image package has been removed from Astro. You should begin migrating over to astro:assets instead, which is Astro's Image component going forward.
Please refer to these GitHub issues for more information:
- Astro Image component doesn't work in production in Vercel (https://github.com/withastro/astro/issues/4536)
- @astrojs/image not working on Vercel (https://github.com/withastro/astro/issues/5457)
- Astro Image/img works locally but not on Vercel (https://github.com/withastro/astro/issues/7536)
- Images are not displayed if there is no src
/publicin the astro4.0project (https://github.com/withastro/astro/issues/9500)