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, 45 insertions, 0 deletions

diff --git a/packages/integrations/image/test/image-ssr.test.js b/packages/integrations/image/test/image-ssr.test.js
index 9881d090a..784a92e53 100644
--- a/packages/integrations/image/test/image-ssr.test.js
+++ b/packages/integrations/image/test/image-ssr.test.js
@@ -62,6 +62,32 @@ describe('SSR images - build', function () {
 		});
 	});
 
+	describe('Inline imports', () => {
+		it('includes src, width, and height attributes', async () => {
+			const app = await fixture.loadTestAdapterApp();
+
+			const request = new Request('http://example.com/');
+			const response = await app.render(request);
+			const html = await response.text();
+			const $ = cheerio.load(html);
+
+			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);
+		});
+	});
+
 	describe('Remote images', () => {
 		it('includes src, width, and height attributes', async () => {
 			const app = await fixture.loadTestAdapterApp();
@@ -142,6 +168,25 @@ describe('SSR images - dev', function () {
 		});
 	});
 
+	describe('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);
+		});
+	});
+
 	describe('Remote images', () => {
 		it('includes src, width, and height attributes', () => {
 			const image = $('#google');