Astro Image component does not work on Netlify using SSR

[lgastler]

What version of astro are you using?

1.2.6

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

Netlify

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

The image component does not render images correctly in Production on Netlify using the @astrojs/netlify adapter. Everything works fine in dev mode but once deployed to Netlify the image endpoint fails to generate and return images, instead it throws the following error:

The image "URL" cannot be displayed because it contains errors.

A deployed site using the minimal Reproducible Example can be found here:
https://astro-image-ssr-reproduction.netlify.app/

Link to Minimal Reproducible Example

https://github.com/lgastler/astro-image-ssr-reproduction

Participation

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

[nicatspark]

This seems to not work again, opening a new issue.

[ezriharmusial]

Having the Same issues also. Works in development, not in production.

[gregorysirtoli]

Same issue here, work in dev. not in prod.

[jacob-leger]

⚠️ EDIT ✏️: I found a solution

It doesn't work for me either! I created an Astro 3 app, excited for the new features, but it doesn't even work on Netlify, the best serverless provider!

And yes, I am using the Netlify adapter. Here is a bit of my config:

export default defineConfig({
	site: // ...
	integrations: [
		mdx(),
		sitemap(),
		prefetch({
			intentSelector: '[data-prefetch]',
			throttle: 10,
		}),
		tailwind(),
		react(),
	],
        output: 'hybrid', // JUST ADD THIS AND IT ALL WORKS! YAY!
	adapter: netlify(),
});

All you have to do is change output: 'server' or output: 'static' to output: 'hybrid'

Btw, I tried output: 'server', but that made my entire site break, not just the images.

I would be willing to help, but I am not very good at Astro.

[Albertyhu]

Hey @Leiloukou,

I tried your solution. However, my webpages show up blank now.

Here is what my astro.config.mjs file look like

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
import mdx from "@astrojs/mdx";

import netlify from "@astrojs/netlify";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind(), react(), mdx()],
  output: "hybrid",
  adapter: netlify(),
});