diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js
index 7679f53bb2..d5d0215f13 100644
--- a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js
+++ b/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 (
diff --git a/website/_dogfooding/_docs tests/tests/img-tests.mdx b/website/_dogfooding/_docs tests/tests/img-tests.mdx
new file mode 100644
index 0000000000..885500b6a3
--- /dev/null
+++ b/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} />
diff --git a/website/_dogfooding/docs-tests-sidebars.js b/website/_dogfooding/docs-tests-sidebars.js
index 61fdaa1f23..02682bbdd8 100644
--- a/website/_dogfooding/docs-tests-sidebars.js
+++ b/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',