getImageComponentAttributes() — astro Function Reference

Architecture documentation for the getImageComponentAttributes() function in rehype-images-to-component.ts from the astro codebase.

Function typescript FrameworkCore IntegrationHooks calls 1 called by 1

Entity Profile

FrameworkCore→ IntegrationHooks→ getImageComponentAttributes() — astro Function Reference

Dependency Diagram

graph TD
  f215b9f0_aed7_c241_48f1_b895058cd133["getImageComponentAttributes()"]
  f40ea775_1be6_ec34_26c7_5b50ec20d1bb["rehype-images-to-component.ts"]
  f215b9f0_aed7_c241_48f1_b895058cd133 -->|defined in| f40ea775_1be6_ec34_26c7_5b50ec20d1bb
  6085ca9f_3ebb_9568_c498_75a59d499707["rehypeImageToComponent()"]
  6085ca9f_3ebb_9568_c498_75a59d499707 -->|calls| f215b9f0_aed7_c241_48f1_b895058cd133
  6e4a1c1e_0702_0b5f_fa0f_f3208e6ed5f0["createArrayAttribute()"]
  f215b9f0_aed7_c241_48f1_b895058cd133 -->|calls| 6e4a1c1e_0702_0b5f_fa0f_f3208e6ed5f0
  style f215b9f0_aed7_c241_48f1_b895058cd133 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/mdx/src/rehype-images-to-component.ts lines 49–72

function getImageComponentAttributes(props: Properties): MdxJsxAttribute[] {
	const attrs: MdxJsxAttribute[] = [];

	for (const [prop, value] of Object.entries(props)) {
		if (prop === 'src') continue;

		/*
		 * <Image /> component expects an array for those attributes but the
		 * received properties are sanitized as strings. So we need to convert them
		 * back to an array.
		 */
		if (prop === 'widths' || prop === 'densities') {
			attrs.push(createArrayAttribute(prop, String(value).split(' ')));
		} else {
			attrs.push({
				name: prop,
				type: 'mdxJsxAttribute',
				value: String(value),
			});
		}
	}

	return attrs;
}