Fix local images having the wrong width and height when both dimensio…

…ns were provided (#6547)

* fix(images): Fix Image providing the wrong width and height if both attributes were provided on local images

* chore: changeset

.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

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

@@ -100,13 +100,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;
 			}

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');

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

@@ -11,6 +11,18 @@ 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>