michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix local images having the wrong width and height when both dimensions were provided (#6547)

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

* chore: changeset
This commit is contained in:
Erika 2023-03-14 15:02:27 +01:00 committed by GitHub
parent 811436d4cb
commit 04dddd783d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/dirty-flies-hunt.md Normal file
View file

@ -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

7
packages/astro/src/assets/services/service.ts
View file

@ -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;
}

20
packages/astro/test/core-image.test.js
View file

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

12
packages/astro/test/fixtures/core-image/src/pages/index.astro vendored
View file

@ -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>