updateImageReferencesInBody() — astro Function Reference

Architecture documentation for the updateImageReferencesInBody() function in runtime.ts from the astro codebase.

Function typescript ContentCollections DataLoaders called by 1

Entity Profile

ContentCollections→ DataLoaders→ updateImageReferencesInBody() — astro Function Reference

Dependency Diagram

graph TD
  68ef2dbb_d9f0_8458_be88_3cee404cea75["updateImageReferencesInBody()"]
  73d13646_8e80_972f_3adc_f28448b64e4d["runtime.ts"]
  68ef2dbb_d9f0_8458_be88_3cee404cea75 -->|defined in| 73d13646_8e80_972f_3adc_f28448b64e4d
  e4e078f6_edaa_075a_12cc_026f71d3745c["renderEntry()"]
  e4e078f6_edaa_075a_12cc_026f71d3745c -->|calls| 68ef2dbb_d9f0_8458_be88_3cee404cea75
  style 68ef2dbb_d9f0_8458_be88_3cee404cea75 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/content/runtime.ts lines 450–506

async function updateImageReferencesInBody(html: string, fileName: string) {
	// @ts-expect-error Virtual module
	const { default: imageAssetMap } = await import('astro:asset-imports');

	const imageObjects = new Map<string, GetImageResult>();

	// @ts-expect-error Virtual module resolved at runtime
	const { getImage } = await import('astro:assets');

	// First load all the images. This is done outside of the replaceAll
	// function because getImage is async.
	for (const [_full, imagePath] of html.matchAll(CONTENT_LAYER_IMAGE_REGEX)) {
		try {
			const decodedImagePath = JSON.parse(imagePath.replaceAll('&#x22;', '"'));

			let image: GetImageResult;
			if (URL.canParse(decodedImagePath.src)) {
				// Remote image, pass through without resolving import
				// We know we should resolve this remote image because either:
				// 1. It was collected with the remark-collect-images plugin, which respects the astro image configuration,
				// 2. OR it was manually injected by another plugin, and we should respect that.
				image = await getImage(decodedImagePath);
			} else {
				const id = imageSrcToImportId(decodedImagePath.src, fileName);

				const imported = imageAssetMap.get(id);
				if (!id || imageObjects.has(id) || !imported) {
					continue;
				}
				image = await getImage({ ...decodedImagePath, src: imported });
			}
			imageObjects.set(imagePath, image);
		} catch {
			throw new Error(`Failed to parse image reference: ${imagePath}`);
		}
	}

	return html.replaceAll(CONTENT_LAYER_IMAGE_REGEX, (full, imagePath) => {
		const image = imageObjects.get(imagePath);

		if (!image) {
			return full;
		}

		const { index, ...attributes } = image.attributes;

		return Object.entries({
			...attributes,
			src: image.src,
			srcset: image.srcSet.attribute,
			// This attribute is used by the toolbar audit
			...(import.meta.env.DEV ? { 'data-image-component': 'true' } : {}),
		})
			.map(([key, value]) => (value ? `${key}="${escape(value)}"` : ''))
			.join(' ');
	});
}