Adds a new `<Picture>` component to the image integration (#3866)

* moving all normalization logic out of the Image component

* refactor: only require loaders to provide the image src

* Adding a `<Picture />` component

* fixing types.ts imports

* refactor: moving getImage to it's own file

* updating component types to use astroHTML.JSX

* Revert "updating component types to use astroHTML.JSX"

This reverts commit 6e5f578da8d1d3fd262f3cd9add7549f7580af97.

* going back to letting loaders add extra HTML attributes

* Always use lazy loading and async decoding

* Cleaning up the Picture component

* Adding test coverage for <Picture>

* updating the README

* using JSX types for the Image and Picture elements

* chore: adding changeset

* Update packages/integrations/image/src/get-image.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* allow users to override loading and async on the <img>

* renaming config to constants, exporting getPicture()

* found the right syntax to import astro-jsx

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

1 files changed, 40 insertions, 1 deletions

diff --git a/packages/integrations/image/test/image-ssg.test.js b/packages/integrations/image/test/image-ssg.test.js
index 7df097d41..b314844b6 100644
--- a/packages/integrations/image/test/image-ssg.test.js
+++ b/packages/integrations/image/test/image-ssg.test.js
@@ -1,6 +1,5 @@
 import { expect } from 'chai';
 import * as cheerio from 'cheerio';
-import path from 'path';
 import sizeOf from 'image-size';
 import { fileURLToPath } from 'url';
 import { loadFixture } from './test-utils.js';
@@ -38,6 +37,16 @@ describe('SSG images', function () {
 				expect(image.attr('width')).to.equal('506');
 				expect(image.attr('height')).to.equal('253');
 			});
+		});
+
+		describe('Inline imports', () => {
+			it ('includes src, width, and height attributes', () => {
+				const image = $('#inline');
+
+				expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
+				expect(image.attr('width')).to.equal('506');
+				expect(image.attr('height')).to.equal('253');
+			});
 
 			it('built the optimized image', () => {
 				verifyImage('_image/assets/social_506x253.jpg', { width: 506, height: 253, type: 'jpg' });
@@ -111,6 +120,36 @@ describe('SSG images', function () {
 			});
 		});
 
+		describe('Local images with inline imports', () => {
+			it('includes src, width, and height attributes', () => {
+				const image = $('#inline');
+
+				const src = image.attr('src');
+				const [route, params] = src.split('?');
+
+				expect(route).to.equal('/_image');
+
+				const searchParams = new URLSearchParams(params);
+
+				expect(searchParams.get('f')).to.equal('jpg');
+				expect(searchParams.get('w')).to.equal('506');
+				expect(searchParams.get('h')).to.equal('253');
+				// TODO: possible to avoid encoding the full image path?
+				expect(searchParams.get('href').endsWith('/assets/social.jpg')).to.equal(true);
+			});
+
+			it('returns the optimized image', async () => {
+				const image = $('#inline');
+
+				const res = await fixture.fetch(image.attr('src'));
+
+				expect(res.status).to.equal(200);
+				expect(res.headers.get('Content-Type')).to.equal('image/jpeg');
+
+				// TODO: verify image file? It looks like sizeOf doesn't support ArrayBuffers
+			});
+		});
+
 		describe('Remote images', () => {
 			it('includes src, width, and height attributes', () => {
 				const image = $('#google');