diff --git a/.changeset/dirty-flies-hunt.md b/.changeset/dirty-flies-hunt.md new file mode 100644 index 000000000000..a20478055603 --- /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/.changeset/stupid-lemons-boil.md b/.changeset/stupid-lemons-boil.md new file mode 100644 index 000000000000..ce334e875694 --- /dev/null +++ b/.changeset/stupid-lemons-boil.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix Image component and `getImage` not handling images from public correctly diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index 7565eff4ad6e..3291ce16e6a4 100644 --- a/.github/workflows/format.yml +++ b/.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" diff --git a/packages/astro/src/assets/services/service.ts b/packages/astro/src/assets/services/service.ts index 11f1a370768b..bb320da05b96 100644 --- a/packages/astro/src/assets/services/service.ts +++ b/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 = { 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 = { }, 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 = { 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 = { } 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()); diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index e0af4f1aab97..59003024f79d 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'); @@ -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 () => { diff --git a/packages/astro/test/fixtures/core-image/public/penguin3.jpg b/packages/astro/test/fixtures/core-image/public/penguin3.jpg new file mode 100644 index 000000000000..db6c44709142 Binary files /dev/null and b/packages/astro/test/fixtures/core-image/public/penguin3.jpg differ diff --git a/packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro b/packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro index b9667968835f..b2ccdaeee53b 100644 --- a/packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro +++ b/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}); --- 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 51382e1bff3d..426e1706f9e1 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"; a penguin +
+ a penguin +
+ +
+ a penguin +
+ +
+ a penguin +
+
fred
@@ -18,5 +30,9 @@ import myImage from "../assets/penguin1.jpg";
Astro logo
+ +
+ ... +