Merge branch 'main' into fix-not-match-route-when-mid

.changeset/dirty-flies-hunt.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix images having the wrong width and height when using the new astro:assets features if both dimensions were provided

.changeset/stupid-lemons-boil.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix Image component and `getImage` not handling images from public correctly

.github/workflows/format.yml

@@ -8,6 +8,7 @@ on:
 
 jobs:
   format:
+    if: github.repository_owner == 'withastro'
     runs-on: ubuntu-latest
     env:
       NODE_OPTIONS: "--max_old_space_size=4096"

packages/astro/src/assets/services/service.ts

@@ -1,5 +1,4 @@
 import { AstroError, AstroErrorData } from '../../core/errors/index.js';
-import { isRemotePath } from '../../core/path.js';
 import { VALID_INPUT_FORMATS } from '../consts.js';
 import { isESMImportedImage } from '../internal.js';
 import type { ImageTransform, OutputFormat } from '../types.js';
@@ -100,13 +99,14 @@ export const baseService: Omit<LocalImageService, 'transform'> = {
 		let targetHeight = options.height;
 		if (isESMImportedImage(options.src)) {
 			const aspectRatio = options.src.width / options.src.height;
-
-			// If we have a desired height and no width, calculate the target width automatically
 			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 {
+			} else if (!targetWidth && !targetHeight) {
+				// If we have neither width or height, use the original image's dimensions
 				targetWidth = options.src.width;
 				targetHeight = options.src.height;
 			}
@@ -124,7 +124,7 @@ export const baseService: Omit<LocalImageService, 'transform'> = {
 	},
 	getURL(options: ImageTransform) {
 		if (!isESMImportedImage(options.src)) {
-			// For non-ESM imported images, width and height are required to avoid CLS, as we can't infer them from the file
+			// For remote images, width and height are explicitly required as we can't infer them from the file
 			let missingDimension: 'width' | 'height' | 'both' | undefined;
 			if (!options.width && !options.height) {
 				missingDimension = 'both';
@@ -140,17 +140,12 @@ export const baseService: Omit<LocalImageService, 'transform'> = {
 					message: AstroErrorData.MissingImageDimension.message(missingDimension, options.src),
 				});
 			}
-		}
 
-		// Both our currently available local services don't handle remote images, so for them we can just return as is
-		if (!isESMImportedImage(options.src) && isRemotePath(options.src)) {
+			// Both our currently available local services don't handle remote images, so we return the path as is.
 			return options.src;
 		}
 
-		if (
-			isESMImportedImage(options.src) &&
-			!VALID_INPUT_FORMATS.includes(options.src.format as any)
-		) {
+		if (!VALID_INPUT_FORMATS.includes(options.src.format as any)) {
 			throw new AstroError({
 				...AstroErrorData.UnsupportedImageFormat,
 				message: AstroErrorData.UnsupportedImageFormat.message(
@@ -162,7 +157,7 @@ export const baseService: Omit<LocalImageService, 'transform'> = {
 		}
 
 		const searchParams = new URLSearchParams();
-		searchParams.append('href', isESMImportedImage(options.src) ? options.src.src : options.src);
+		searchParams.append('href', options.src.src);
 
 		options.width && searchParams.append('w', options.width.toString());
 		options.height && searchParams.append('h', options.height.toString());

packages/astro/test/core-image.test.js

@@ -61,12 +61,30 @@ describe('astro:image', () => {
 				expect(!!$img.attr('decoding')).to.equal(true);
 			});
 
-			it('has width and height', () => {
+			it('has width and height - no dimensions set', () => {
 				let $img = $('#local img');
 				expect($img.attr('width')).to.equal('207');
 				expect($img.attr('height')).to.equal('243');
 			});
 
+			it('has proper width and height - only width', () => {
+				let $img = $('#local-width img');
+				expect($img.attr('width')).to.equal('350');
+				expect($img.attr('height')).to.equal('411');
+			});
+
+			it('has proper width and height - only height', () => {
+				let $img = $('#local-height img');
+				expect($img.attr('width')).to.equal('170');
+				expect($img.attr('height')).to.equal('200');
+			});
+
+			it('has proper width and height - has both width and height', () => {
+				let $img = $('#local-both img');
+				expect($img.attr('width')).to.equal('300');
+				expect($img.attr('height')).to.equal('400');
+			});
+
 			it('includes the provided alt', () => {
 				let $img = $('#local img');
 				expect($img.attr('alt')).to.equal('a penguin');
@@ -124,6 +142,13 @@ describe('astro:image', () => {
 					expect(!!$img.attr('width')).to.equal(true);
 					expect(!!$img.attr('height')).to.equal(true);
 				});
+
+				it('support images from public', () => {
+					let $img = $('#public img');
+					expect($img.attr('src')).to.equal('/penguin3.jpg');
+					expect(!!$img.attr('width')).to.equal(true);
+					expect(!!$img.attr('height')).to.equal(true);
+				});
 			});
 
 			it('error if no width and height', async () => {

packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro

@@ -11,7 +11,7 @@ export async function getStaticPaths() {
 
 const { entry } = Astro.props;
 const { Content } = await entry.render();
-const myImage = await getImage(entry.data.image);
+const myImage = await getImage({src: entry.data.image});
 ---
 <html>
 	<head>

packages/astro/test/fixtures/core-image/src/pages/index.astro

@@ -11,12 +11,28 @@ import myImage from "../assets/penguin1.jpg";
 		<Image src={myImage} alt="a penguin" />
 	</div>
 
+	<div id="local-width">
+		<Image src={myImage} alt="a penguin" width={350} />
+	</div>
+
+	<div id="local-height">
+		<Image src={myImage} alt="a penguin" height={200} />
+	</div>
+
+		<div id="local-both">
+		<Image src={myImage} alt="a penguin" width={300} height={400} />
+	</div>
+
 	<div id="remote">
 		<Image src="https://avatars.githubusercontent.com/u/622227?s=64" alt="fred" width="48" height="48" />
 	</div>
 
 	<div id="data-uri">
 		<Image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAA2gAwAEAAAAAQAAAA0AAAAAWvB1rQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDYuMC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGV7hBwAAAWJJREFUKBVtUDEsQ1EUve+1/SItKYMIkYpF06GJdGAwNFFGkxBEYupssRm6EpvJbpVoYhRd6FBikDSxYECsBpG25D/nvP/+p+Ik551z73v33feuyA/izq5CL8ET8ALcBolYIP+vd0ibX/yAT7uj2qkVzwWzUBa0nbacbkKJHi5dlYhXmARYeAS+MwCWA5FPqKIP/9IH/wiygMru5y5mcRYkPHYKP7gAPw4SDbCjRXMgRBJctM4t4ROriM2QSpmkeOtub6YfMYrZvelykbD1sxJVg+6AfKqURRKQLfA4JvoVWgIjDMNlGLVKZxNRFsZsoHGAgREZHKPlJEi2t7if3r2KKS9nVOo0rtNZ3yR7M/VGTqTy5Y4o/scWHBbKfIq0/eZ+x3850OZpaTTxlu/4D3ssuA72uxrYS2rFYjh+aRbmb24LpTVu1IqVKG8P/lmUEaNMxeh6fmquOhkMBE8JJ2yPfwPjdVhiDbiX6AAAAABJRU5ErkJggg==" alt="Astro logo" width="16" height="16" />
 	</div>
+
+	<div id="public">
+		<Image src="/penguin3.jpg" width={400} height={400} alt="..." />
+	</div>
 </body>
 </html>