Astro Image component does'nt work in production in Vercel

[GeoBrodas]

What version of astro are you using?

1.0.9

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

None

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

The Image component seems to work perfect in development, but doesn't work in production when deployed on Vercel. I had to rever back to the normal <img /> tag for the image to be displayed. I believe this is a bug.

Link to Minimal Reproducible Example

Occurs when deployed to Vercel

Participation

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

[tony-sull]

@GeoBrodas are you seeing this issue in a static build, or are you using the @astrojs/vercel integration for server-side rendering?

Any chance you have access to build errors or anything that may help us narrow this down as well?

[GeoBrodas]

No No, I'm seeing this is in the Static Build. I don't think there's any build errors, but let me take a look

Edit:
Here you go-

Code snippet -

[wiverson]

FYI I am seeing similar. Using Astrowind template. Trying to write a list of posts and no matter what I do I can't get the images to display.

https://gist.github.com/wiverson/ae5dbbc7db465632e093c41928f613c7

[wiverson]

Everything works fine locally and fails when I try to deploy to Vercel.

[wiverson]

High level repro steps:

1. Clone off the Astrowind template as a starting point.
2. Modify the HighlightedPosts.astro, along the lines of this gist - basically, just grabbing the Markdown posts with Astro.glob. Note that the Astrowind template uses image URLs from the frontmatter.
3. You can access and display the URLs from the frontmatter, and Picture works fine in local dev.
4. When you deploy to Vercel, the images do not render, and Vercel output shows errors along the following:

[@astrojs/image] "../src/assets/images/astronaut.jpg" image could not be fetched

I tried a bunch of different variants for rewriting the URLs fed into Picture, and nothing worked. Several variants worked in local dev but all failed with a similar error when I tried to deploy to Vercel.

I don't really understand why the Picture component works in the individual posts and also on the post list, but not in the code above.

As a workaround I may fall back to putting images in the public directory instead of the data directory, or even worse duplicating as I'm seeing a bunch of other bugs reported related to Picture not finding/working with images in public.

Let me know if you need anything else to repro/resolve.

[wiverson]

One more bit of info:

This works:

<Picture
        src={import("~/assets/images/colors.jpg")}
        class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
        widths={[400]}
        alt="Post 1 Image"
        aspectRatio="16:9"
      />

But this...

<Picture
            src={import(post.frontmatter.url)}
            class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
            widths={[400]}
            alt="Post 1 Image"
            aspectRatio="16:9"
          />

Fails horribly, even though post.frontmatter.url is a string that is the same value as the colors.jpg above.

file:///Users/will/src/tog-astrowind/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50572
            const err = new Error(`Cannot find module '${id}' imported from '${importer}'`);
                        ^
Error: Cannot find module '~/assets/images/colors.jpg' imported from '/Users/will/src/tog-astrowind/src/components/widgets/HighlightedPosts.astro'
    at viteResolve (file:///Users/will/src/tog-astrowind/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50572:25)
    at nodeImport (file:///Users/will/src/tog-astrowind/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50607:15)
    at ssrImport (file:///Users/will/src/tog-astrowind/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50502:20)
    at ssrDynamicImport (file:///Users/will/src/tog-astrowind/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50529:16)
    at eval (/src/components/widgets/HighlightedPosts.astro:64:112)
    at Array.map (<anonymous>)
    at eval (/src/components/widgets/HighlightedPosts.astro:54:25)
    at async Module.renderToIterable (/node_modules/astro/dist/runtime/server/render/astro.js:79:21)
    at async renderAstroComponentInline (/node_modules/astro/dist/runtime/server/render/component.js:75:24)
    at async Module.renderChild (/node_modules/astro/dist/runtime/server/render/any.js:25:5) {
  code: 'ERR_MODULE_NOT_FOUND'
}

[lgastler]

Facing the same issue using Netlify with SSR. Locally in dev and also build in preview everything works fine, but once deployed to Netlify using the SSR adapter the images stop loading.

I created a minimal reproduction repo just using @astrojs/image and the @astrojs/netlify adapter.

Reproduction Repo
Deployed Site on Netlify

[AgileNix]

I'm having a similar issue. In my case, no images are displayed on Vercel production deployments when I use SSR. With SSG, everything works fine.

[matthewp]

@wiverson your gist is a 404 for me, is it private perhaps?

import(post.frontmatter.url)

This doesn't work in Astro. Vite has to know the path in order to build it. So you can only use static strings here. Maybe this is your issue.

@GeoBrodas Can you share an example that fails?
@Igloczek Thanks for the reproduction! Can you file a separate issue to track this with Netlify? It's very likely a different issue.

[Igloczek]

Wasn't me tho 😄

[wiverson]

@matthewp I actually got it working with this new gist:

https://gist.github.com/wiverson/697779257b9979ca07f3048f2bcad97d

I went back and forth a bit with the author of Astrowind and got it sorted out, now it's working with this version. IIRC turned out to be a bit of fiddly path weirdness, where the path was resolving correctly with one configuration in dev but not in prod. The version above works correctly.

[matthewp]

@Igloczek haha, so sorry, I meant @lgastler.

@lgastler would you mind creating a new issue for Netlify so we can track that separately? Thanks!

[lgastler]

@matthewp sure, just did. 👍

See #4794.

[matthewp]

Ok great, so it seems that this issue was mixed between Vercel SSR, Vercel static (resolved) and Netlify (new issue). So I'm going to close this one. @GeoBrodas if you can share a failing example please open a new issue with it, thanks!