diff --git a/.changeset/fluffy-seas-shine.md b/.changeset/fluffy-seas-shine.md new file mode 100644 index 000000000000..358e071db2d0 --- /dev/null +++ b/.changeset/fluffy-seas-shine.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Correct types to allow `priority` on all images diff --git a/packages/astro/src/assets/types.ts b/packages/astro/src/assets/types.ts index bed111e350f7..514a3e792518 100644 --- a/packages/astro/src/assets/types.ts +++ b/packages/astro/src/assets/types.ts @@ -157,6 +157,17 @@ type ImageSharedProps = T & { * ``` */ quality?: ImageQuality; + + /** + * If true, the image will be loaded with a higher priority. This can be useful for images that are visible above the fold. There should usually be only one image with `priority` set to `true` per page. + * All other images will be lazy-loaded according to when they are in the viewport. + * **Example**: + * ```astro + * ... + * ``` + */ + priority?: boolean; + } & ( | { /** @@ -201,15 +212,6 @@ type ImageSharedProps = T & { */ position?: string; - /** - * If true, the image will be loaded with a higher priority. This can be useful for images that are visible above the fold. There should usually be only one image with `priority` set to `true` per page. - * All other images will be lazy-loaded according to when they are in the viewport. - * **Example**: - * ```astro - * ... - * ``` - */ - priority?: boolean; /** * A list of widths to generate images for. The value of this property will be used to assign the `srcset` property on the final `img` element. diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 353f544a75cb..ae07541736ef 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -114,6 +114,13 @@ describe('astro:image', () => { assert.equal(res.headers.get('content-type'), 'image/webp'); }); + it('includes priority loading attributes', () => { + let $img = $('#priority img'); + assert.equal($img.attr('loading'), 'eager'); + assert.equal($img.attr('decoding'), 'sync'); + assert.equal($img.attr('fetchpriority'), 'high'); + }); + it('properly skip processing SVGs, but does not error', async () => { let res = await fixture.fetch('/svgSupport'); let html = await res.text(); diff --git a/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro index 43dc5613d2e8..9ec2d062a465 100644 --- a/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro +++ b/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro @@ -18,5 +18,9 @@ import myImage from "../assets/penguin1.jpg";
fred2
+ +
+ 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 426e1706f9e1..071875b88408 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,10 @@ import myImage from "../assets/penguin1.jpg"; a penguin +
+ a penguin +
+
a penguin