imageSrcToImportId() — astro Function Reference

Architecture documentation for the imageSrcToImportId() function in resolveImports.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ imageSrcToImportId() — astro Function Reference

Dependency Diagram

graph TD
  73d4ebe4_d89c_7ed6_78b0_c290d2d27752["imageSrcToImportId()"]
  f60c7a86_1224_0eea_f0b7_7bdfeeefce2f["resolveImports.ts"]
  73d4ebe4_d89c_7ed6_78b0_c290d2d27752 -->|defined in| f60c7a86_1224_0eea_f0b7_7bdfeeefce2f
  style 73d4ebe4_d89c_7ed6_78b0_c290d2d27752 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/assets/utils/resolveImports.ts lines 13–41

export function imageSrcToImportId(imageSrc: string, filePath?: string): string | undefined {
	// If the import is coming from the data store it will have a special prefix to identify it
	// as an image import. We remove this prefix so that we can resolve the image correctly.
	imageSrc = removeBase(imageSrc, IMAGE_IMPORT_PREFIX);

	// We only care about local imports
	if (isRemotePath(imageSrc)) {
		return;
	}
	// We only care about images
	const ext = imageSrc.split('.').at(-1)?.toLowerCase() as
		| (typeof VALID_INPUT_FORMATS)[number]
		| undefined;
	if (!ext || !VALID_INPUT_FORMATS.includes(ext)) {
		return;
	}

	// The import paths are relative to the content (md) file, but when it's actually resolved it will
	// be in a single assets file, so relative paths will no longer work. To deal with this we use
	// a query parameter to store the original path to the file and append a query param flag.
	// This allows our Vite plugin to intercept the import and resolve the path relative to the
	// importer and get the correct full path for the imported image.

	const params = new URLSearchParams(CONTENT_IMAGE_FLAG);
	if (filePath) {
		params.set('importer', filePath);
	}
	return `${imageSrc}?${params.toString()}`;
}