diff options
| -rw-r--r-- | .changeset/dirty-flies-hunt.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/assets/services/service.ts | 7 | ||||
| -rw-r--r-- | packages/astro/test/core-image.test.js | 20 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/core-image/src/pages/index.astro | 12 |
4 files changed, 40 insertions, 4 deletions
diff --git a/.changeset/dirty-flies-hunt.md b/.changeset/dirty-flies-hunt.md new file mode 100644 index 000000000..a20478055 --- /dev/null +++ b/.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 diff --git a/packages/astro/src/assets/services/service.ts b/packages/astro/src/assets/services/service.ts index 11f1a3707..1af8360da 100644 --- a/packages/astro/src/assets/services/service.ts +++ b/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; } diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index e0af4f1aa..2eb905d94 100644 --- a/packages/astro/test/core-image.test.js +++ b/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'); diff --git a/packages/astro/test/fixtures/core-image/src/pages/index.astro b/packages/astro/test/fixtures/core-image/src/pages/index.astro index 51382e1bf..565aa5ab1 100644 --- a/packages/astro/test/fixtures/core-image/src/pages/index.astro +++ b/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> |