addStaticImageFactory() — astro Function Reference

Source Code

packages/astro/src/assets/vite-plugin-assets.ts lines 36–109

const addStaticImageFactory = (
	settings: AstroSettings,
): typeof globalThis.astroAsset.addStaticImage => {
	return (options, hashProperties, originalFSPath) => {
		if (!globalThis.astroAsset.staticImages) {
			globalThis.astroAsset.staticImages = new Map<
				string,
				{
					originalSrcPath: string;
					transforms: Map<string, { finalPath: string; transform: ImageTransform }>;
				}
			>();
		}

		// Rollup will copy the file to the output directory, as such this is the path in the output directory, including the asset prefix / base
		const ESMImportedImageSrc = isESMImportedImage(options.src) ? options.src.src : options.src;
		const fileExtension = extname(ESMImportedImageSrc);
		const assetPrefix = getAssetsPrefix(fileExtension, settings.config.build.assetsPrefix);

		// This is the path to the original image, from the dist root, without the base or the asset prefix (e.g. /_astro/image.hash.png)
		const finalOriginalPath = removeBase(
			removeBase(ESMImportedImageSrc, settings.config.base),
			assetPrefix,
		);

		const hash = hashTransform(options, settings.config.image.service.entrypoint, hashProperties);

		let finalFilePath: string;
		let transformsForPath = globalThis.astroAsset.staticImages.get(finalOriginalPath);
		const transformForHash = transformsForPath?.transforms.get(hash);

		// If the same image has already been transformed with the same options, we'll reuse the final path
		if (transformsForPath && transformForHash) {
			finalFilePath = transformForHash.finalPath;
		} else {
			finalFilePath = prependForwardSlash(
				joinPaths(
					isESMImportedImage(options.src) ? '' : settings.config.build.assets,
					prependForwardSlash(propsToFilename(finalOriginalPath, options, hash)),
				),
			);

			if (!transformsForPath) {
				globalThis.astroAsset.staticImages.set(finalOriginalPath, {
					originalSrcPath: originalFSPath,
					transforms: new Map(),
				});
				transformsForPath = globalThis.astroAsset.staticImages.get(finalOriginalPath)!;
			}

			transformsForPath.transforms.set(hash, {
				finalPath: finalFilePath,
				transform: options,
			});
		}

		// The paths here are used for URLs, so we need to make sure they have the proper format for an URL
		// (leading slash, prefixed with the base / assets prefix, encoded, etc)
		// Create URL object to safely manipulate and append assetQueryParams if available (for adapter-level tracking like skew protection)
		const url = createPlaceholderURL(
			settings.config.build.assetsPrefix
				? encodeURI(joinPaths(assetPrefix, finalFilePath))
				: encodeURI(prependForwardSlash(joinPaths(settings.config.base, finalFilePath))),
		);
		const assetQueryParams = settings.adapter?.client?.assetQueryParams;
		if (assetQueryParams) {
			assetQueryParams.forEach((value, key) => {
				url.searchParams.set(key, value);
			});
		}

		return stringifyPlaceholderURL(url);
	};
};