feat(assets): Allow users to set a custom endpoint to use for image o…

…ptimization (#8467)

Co-authored-by: Chris Swithinbank <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>

.changeset/dirty-seahorses-move.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Add a new `image.endpoint` setting to allow using a custom endpoint in dev and SSR

packages/astro/src/@types/astro.ts

@@ -974,6 +974,28 @@ export interface AstroUserConfig {
  * @name Image Options
  */
  image?: {
+ /**
+ * @docs
+ * @name image.endpoint
+ * @type {string}
+ * @default `undefined`
+ * @version 3.1.0
+ * @description
+ * Set the endpoint to use for image optimization in dev and SSR. Set to `undefined` to use the default endpoint.
+ *
+ * The endpoint will always be injected at `/_image`.
+ *
+ * ```js
+ * {
+ * image: {
+ * // Example: Use a custom image endpoint
+ * endpoint: './src/image-endpoint.ts',
+ * },
+ * }
+ * ```
+ */
+ endpoint?: string;
+
  /**
  * @docs
  * @name image.service

packages/astro/src/assets/internal.ts

@@ -11,10 +11,12 @@ import type {
 import { matchHostname, matchPattern } from './utils/remotePattern.js';
 
 export function injectImageEndpoint(settings: AstroSettings) {
+ const endpointEntrypoint = settings.config.image.endpoint ?? 'astro/assets/image-endpoint';
+
  // TODO: Add a setting to disable the image endpoint
  settings.injectedRoutes.push({
  pattern: '/_image',
- entryPoint: 'astro/assets/image-endpoint',
+ entryPoint: endpointEntrypoint,
  prerender: false,
  });
 

packages/astro/src/core/config/schema.ts

@@ -183,6 +183,7 @@ export const AstroConfigSchema = z.object({
  .default(ASTRO_CONFIG_DEFAULTS.redirects),
  image: z
  .object({
+ endpoint: z.string().optional(),
  service: z
  .object({
  entrypoint: z

packages/astro/test/core-image.test.js

@@ -462,6 +462,47 @@ describe('astro:image', () => {
  expect($('#local img').attr('data-service-config')).to.equal('bar');
  });
  });
+
+ describe('custom endpoint', async () => {
+ /** @type {import('./test-utils').DevServer} */
+ let customEndpointDevServer;
+
+ /** @type {import('./test-utils.js').Fixture} */
+ let customEndpointFixture;
+
+ before(async () => {
+ customEndpointFixture = await loadFixture({
+ root: './fixtures/core-image/',
+ image: {
+ endpoint: './src/custom-endpoint.ts',
+ service: testImageService({ foo: 'bar' }),
+ domains: ['avatars.githubusercontent.com'],
+ },
+ });
+
+ customEndpointDevServer = await customEndpointFixture.startDevServer({
+ server: { port: 4324 },
+ });
+ });
+
+ it('custom endpoint works', async () => {
+ const response = await customEndpointFixture.fetch('/');
+ const html = await response.text();
+
+ const $ = cheerio.load(html);
+ const src = $('#local img').attr('src');
+
+ let res = await customEndpointFixture.fetch(src);
+ expect(res.status).to.equal(200);
+ expect(await res.text()).to.equal(
+ "You fool! I'm not a image endpoint at all, I just return this!"
+ );
+ });
+
+ after(async () => {
+ await customEndpointDevServer.stop();
+ });
+ });
  });
 
  describe('proper errors', () => {

packages/astro/test/fixtures/core-image/src/custom-endpoint.ts

@@ -0,0 +1,3 @@
+export const GET = async () => {
+ return new Response("You fool! I'm not a image endpoint at all, I just return this!", { status: 200 });
+};