Fix image regeneration after changing image service (#6680)

.changeset/lovely-owls-sniff.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/image': patch
+---
+
+Invalidates cache when changing serviceEntryPoint

packages/astro/src/assets/utils/transformToPath.ts

@@ -4,7 +4,7 @@ import { shorthash } from '../../runtime/server/shorthash.js';
 import { isESMImportedImage } from '../internal.js';
 import type { ImageTransform } from '../types.js';
 
-export function propsToFilename(transform: ImageTransform) {
+export function propsToFilename(transform: ImageTransform, imageService: string) {
 	if (!isESMImportedImage(transform.src)) {
 		return transform.src;
 	}
@@ -12,6 +12,9 @@ export function propsToFilename(transform: ImageTransform) {
 	let filename = removeQueryString(transform.src.src);
 	const ext = extname(filename);
 	filename = basename(filename, ext);
+	// take everything from transform except alt, which is not used in the hash
+	const { alt, ...rest } = transform;
+	const hashFields = { ...rest, imageService };
 	const outputExt = transform.format ? `.${transform.format}` : ext;
-	return `/${filename}_${shorthash(JSON.stringify(transform))}${outputExt}`;
+	return `/${filename}_${shorthash(JSON.stringify(hashFields))}${outputExt}`;
 }

packages/astro/src/assets/vite-plugin-assets.ts

@@ -167,7 +167,10 @@ export default function assets({
 						}
 
 						filePath = prependForwardSlash(
-							joinPaths(settings.config.build.assets, propsToFilename(options))
+							joinPaths(
+								settings.config.build.assets,
+								propsToFilename(options, settings.config.image.service)
+							)
 						);
 						globalThis.astroAsset.staticImages.set(options, filePath);
 					}

packages/integrations/image/src/index.ts

@@ -122,7 +122,7 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
 						? staticImages.get(transform.src)!
 						: new Map<string, TransformOptions>();
 
-					const filename = propsToFilename(transform);
+					const filename = propsToFilename(transform, resolvedOptions.serviceEntryPoint);
 
 					srcTranforms.set(filename, transform);
 					staticImages.set(transform.src, srcTranforms);

packages/integrations/image/src/loaders/index.ts

@@ -94,6 +94,11 @@ export interface TransformOptions {
 	 * For remote images, provide the full URL.
 	 */
 	src: string;
+	/**
+	 * The alt tag of the image. This is used for accessibility and will be made required in a future version.
+	 * Empty string is allowed.
+	 */
+	alt?: string;
 	/**
 	 * The output format to be used in the optimized image.
 	 *

packages/integrations/image/src/utils/paths.ts

@@ -35,16 +35,19 @@ function basename(src: string) {
 	return removeQueryString(src.replace(/^.*[\\\/]/, ''));
 }
 
-export function propsToFilename(transform: TransformOptions) {
+export function propsToFilename(transform: TransformOptions, serviceEntryPoint: string) {
 	// strip off the querystring first, then remove the file extension
 	let filename = removeQueryString(transform.src);
+	// take everything from transform except alt, which is not used in the hash
+	const { alt, ...rest } = transform;
+	const hashFields = { ...rest, serviceEntryPoint };
 	filename = basename(filename);
 	const ext = extname(filename);
 	filename = removeExtname(filename);
 
 	const outputExt = transform.format ? `.${transform.format}` : ext;
 
-	return `/${filename}_${shorthash(JSON.stringify(transform))}${outputExt}`;
+	return `/${filename}_${shorthash(JSON.stringify(hashFields))}${outputExt}`;
 }
 
 export function appendForwardSlash(path: string) {