I am building a blog with Cloudflare workers and Astro content collections. Migrating from a static setup to SSR, I wanted to preserve image optimization. Content collections are processed at build time so I can luckily use Sharp during the build to avoid issues in SSR. However, Cloudflare's compiled image service doesn't quite support this pattern at runtime.
My setup:
I have a content collection called blog containing my posts and related image assets
I have a server-rendered route (not prerendered) that fetches each post with getEntry()
The build succeeds running sharp locally as expected. However, Astro generates image path to resolves to an SSR endpoint (<img src="/_image?href=/_astro/image.png"), rather than the built path (<img src="/_astro/image.png").
What's the expected result?
I expect Astro to output this endpoint route (/_image) since I am not using the prerender flag. However, it would be nice of the Cloudflare integration added a proxy endpoint that routed request to _image to the appropriate entry in dist/. I added this proxy to my own setup using the image.endpoint option to resolve the issue. Here is the implementation:
Astro Info
Describe the Bug
I am building a blog with Cloudflare workers and Astro content collections. Migrating from a static setup to SSR, I wanted to preserve image optimization. Content collections are processed at build time so I can luckily use Sharp during the build to avoid issues in SSR. However, Cloudflare's
compiled
image service doesn't quite support this pattern at runtime.My setup:
blog
containing my posts and related image assetsgetEntry()
The build succeeds running sharp locally as expected. However, Astro generates image path to resolves to an SSR endpoint (
<img src="/_image?href=/_astro/image.png"
), rather than the built path (<img src="/_astro/image.png"
).What's the expected result?
I expect Astro to output this endpoint route (
/_image
) since I am not using theprerender
flag. However, it would be nice of the Cloudflare integration added a proxy endpoint that routed request to_image
to the appropriate entry indist/
. I added this proxy to my own setup using theimage.endpoint
option to resolve the issue. Here is the implementation:Injecting this would make
imageServer: 'compiled'
the perfect option for content collection users, since it would unlock SSR rendering as well.Note: I attempted to make a reproduction in Stackblitz... but I couldn't get a project to build using the cloudflare adapter. I just see a hang and no dist output 😬
Link to Minimal Reproducible Example
https://github.com/bholmesdev/bholmesdev/blob/astro-v4/astro.config.mjs#L17
Participation