service.getHTMLAttributes() — astro Function Reference

Architecture documentation for the service.getHTMLAttributes() function in build-service.ts from the astro codebase.

Function typescript CoreAstro CoreMiddleware

Entity Profile

CoreAstro→ CoreMiddleware→ service.getHTMLAttributes() — astro Function Reference

Dependency Diagram

graph TD
  a3f7723b_8f77_a5d6_3268_cbfa56eacb6a["service.getHTMLAttributes()"]
  50d6c5a0_3bd9_55ef_d9d2_9d25a375dbf7["build-service.ts"]
  a3f7723b_8f77_a5d6_3268_cbfa56eacb6a -->|defined in| 50d6c5a0_3bd9_55ef_d9d2_9d25a375dbf7
  style a3f7723b_8f77_a5d6_3268_cbfa56eacb6a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/vercel/src/image/build-service.ts lines 10–45

	getHTMLAttributes(options) {
		const { inputtedWidth, ...props } = options;

		// If `validateOptions` returned a different width than the one of the image, use it for attributes
		if (inputtedWidth) {
			props.width = inputtedWidth;
		}

		let targetWidth = props.width;
		let targetHeight = props.height;
		if (isESMImportedImage(props.src)) {
			const aspectRatio = props.src.width / props.src.height;
			if (targetHeight && !targetWidth) {
				// If we have a height but no width, use height to calculate the width
				targetWidth = Math.round(targetHeight * aspectRatio);
			} else if (targetWidth && !targetHeight) {
				// If we have a width but no height, use width to calculate the height
				targetHeight = Math.round(targetWidth / aspectRatio);
			} else if (!targetWidth && !targetHeight) {
				// If we have neither width or height, use the original image's dimensions
				targetWidth = props.src.width;
				targetHeight = props.src.height;
			}
		}

		const { src, width, height, format, quality, densities, widths, formats, ...attributes } =
			options;

		return {
			...attributes,
			width: targetWidth,
			height: targetHeight,
			loading: attributes.loading ?? 'lazy',
			decoding: attributes.decoding ?? 'async',
		};
	},