[MDX] Support `img` component prop for optimized images (#8468)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

1 files changed, 23 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/mdx-images.test.js b/packages/integrations/mdx/test/mdx-images.test.js
index c9c8e1f7c..128a2fcb0 100644
--- a/packages/integrations/mdx/test/mdx-images.test.js
+++ b/packages/integrations/mdx/test/mdx-images.test.js
@@ -2,6 +2,8 @@ import { expect } from 'chai';
 import { parseHTML } from 'linkedom';
 import { loadFixture } from '../../../astro/test/test-utils.js';
 
+const imageTestRoutes = ['with-components', 'esm-import', 'content-collection']
+
 describe('MDX Page', () => {
 	let devServer;
 	let fixture;
@@ -36,5 +38,26 @@ describe('MDX Page', () => {
 			// Image with spaces in the path
 			expect(imgs.item(3).src.startsWith('/_image')).to.be.true;
 		});
+
+		for (const route of imageTestRoutes) {
+			it(`supports img component - ${route}`, async () => {
+				const res = await fixture.fetch(`/${route}`);
+				expect(res.status).to.equal(200);
+	
+				const html = await res.text();
+				const { document } = parseHTML(html);
+	
+				const imgs = document.getElementsByTagName('img');
+				expect(imgs.length).to.equal(2);
+	
+				const assetsImg = imgs.item(0);
+				expect(assetsImg.src.startsWith('/_image')).to.be.true;
+				expect(assetsImg.hasAttribute('data-my-image')).to.be.true;
+	
+				const publicImg = imgs.item(1);
+				expect(publicImg.src).to.equal('/favicon.svg');
+				expect(publicImg.hasAttribute('data-my-image')).to.be.true;
+			});
+		}
 	});
 });