Custom image path other then _image does not work in dev

[leifmarcus]

Astro Info

Astro                    v3.2.3
Node                     v18.16.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             pcom-astro-vite-config
                         @astrojs/partytown
                         @astrojs/vue
                         astro-purgecss

If this issue only occurs in one browser, which browser is a problem?

no specific browser

Describe the Bug

When there is the need to implement a custom image endpoint, the hardcoded _image endpoint makes it not possible to create a custom endpoint for images. As in build mode all query parameters are stripped away and only the ones on /_image requests are allowed due to the hack, that is implemented:

astro/packages/astro/src/vite-plugin-astro-server/request.ts

Line 50 in 3468c06

if (!buildingToSSR && pathname !== '/_image') {

.

What's the expected result?

Due to our infrastructure, we need to have the images delivered through an endpoint that is like /-/images. When integrating a route like this with the injectRoute functionality of the Astro Integrations API, all query parameters will be stripped away.

It would be nice, if the image endpoint can be customized via the astro config.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-gkz7uz-hszwyg

Participation

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

[Princesseuh]

As in build mode all query parameters are stripped away and only the ones on /_image requests are allowed due to the hack

The code you linked is only ran in dev mode. Do you mean that you need a /-/images endpoint in dev? In SSG there's no endpoint at build time.

[leifmarcus]

Yes, that is what I want to have. I want to have the same functionality implemented, that you have for the _image endpoint.

In the Astro documentation for local image services, you say, that you can use a custom image endpoint for transforming images.

The example code is:

getURL(options: ImageTransform, imageConfig: AstroConfig['image']) {
    const searchParams = new URLSearchParams();
    searchParams.append('href', typeof options.src === "string" ? options.src : options.src.src);
    options.width && searchParams.append('w', options.width.toString());
    options.height && searchParams.append('h', options.height.toString());
    options.quality && searchParams.append('q', options.quality.toString());
    options.format && searchParams.append('f', options.format);
    return `/my_custom_endpoint_that_transforms_images?${searchParams}`; // <-- This one here will not work in dev mode as expected.
  },

this would not work when running on a dev server. But it is documented as it would work in the same way as the _image endpoint.

[Princesseuh]

Hmm, okay. This is quite a very niche usage, since typically people can just put their custom endpoint at /_image automatically using image.endpoint, so it's quite unlikely we'll prioritize this, but I'll ask the rest of the team for their thoughts.

The docs example is unfortunately outdated with our current recommendation, it was written before the existence of image.endpoint

[leifmarcus]

@Princesseuh, Thanks for looking into this issue.

Wouldn’t it be possible, to have the image endpoint configurable? It might be a niche for now, but when more and more bigger projects go with astro, this might be a problem. From my experience with larger projects, they have often specific requirements. Or do you see astro more as a Framwork for smaller projects?

[Princesseuh]

Well, this is quite literally what we intend with image.endpoint, right. We could extend it to allow setting a custom path in addition to the entrypoint, I assume.

Needing a custom image endpoint is already very niche (we have only a handful of users using that setting), but needing both a custom image endpoint AND a custom path for it is very very, very, very niche, ha. I think if we were to add the option, you'd be the only user using it at this time.

We have quite large projects running in production right now that uses _image just fine, and a lot of the other frameworks also don't allow changing the path.

[leifmarcus]

@Princesseuh, So It seems like we need to work with the _image endpoint 😄 I guess, we will make it work somehow.

[Princesseuh]

@Princesseuh, So It seems like we need to work with the _image endpoint 😄 I guess, we will make it work somehow.

I'm sorry for the inconvenience! An alternative for your project in the meantime could also be to patch the package using something like pnpm patch (or equivalent for other package managers): https://pnpm.io/cli/patch

[leifmarcus]

@Princesseuh, For now, we implemented a custom solution, that we aligned with your image implementation. For Dev and SSR we use the direct link to the image CDN and in Build mode we download the master images to the dist folder. I mean, in general a similar approach as you implemented.

Thanks again for your support!

[Princesseuh]

In Astro 5 the route of the endpoint can now be customised using image.endpoint.route

[leifmarcus]

In Astro 5 the route of the endpoint can now be customised using image.endpoint.route

@Princesseuh, I already saw that. Really nice, thanks.