fix(ideal-image): fix IdealImage in dev not handling ES import images properly (#5760)

packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js

@@ -12,8 +12,15 @@ function Image(props) {
   const {alt, className, img} = props;
 
   // In dev env just use regular img with original file
-  if (img.default) {
-    return <img src={img.default} className={className} alt={alt} {...props} />;
+  if (typeof img === 'string' || typeof img.default === 'string') {
+    return (
+      <img
+        src={img?.default ?? img}
+        className={className}
+        alt={alt}
+        {...props}
+      />
+    );
   }
 
   return (

website/_dogfooding/_docs tests/tests/img-tests.mdx

@@ -0,0 +1,19 @@
+# Image tests
+
+import Image from '@theme/IdealImage';
+
+import docusaurusImport from '@site/static/img/docusaurus.png';
+
+export const docusaurusRequire = require('@site/static/img/docusaurus.png');
+
+## Regular images
+
+<img src={docusaurusImport} />
+
+<img src={docusaurusRequire.default} />
+
+## Ideal images
+
+<Image img={docusaurusImport} />
+
+<Image img={docusaurusRequire} />

website/_dogfooding/docs-tests-sidebars.js

@@ -13,6 +13,16 @@ module.exports = {
       className: 'red',
       label: 'Index',
     },
+    {
+      type: 'category',
+      label: 'Tests',
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: 'tests',
+        },
+      ],
+    },
     {
       type: 'category',
       label: 'section',