diff --git a/packages/docusaurus-plugin-ideal-image/src/index.ts b/packages/docusaurus-plugin-ideal-image/src/index.ts
index 4b8862171859..66c3c92c44d7 100644
--- a/packages/docusaurus-plugin-ideal-image/src/index.ts
+++ b/packages/docusaurus-plugin-ideal-image/src/index.ts
@@ -54,6 +54,12 @@ export default function pluginIdealImage(
rules: [
{
test: /\.(?:png|jpe?g)$/i,
+ // We don't want to use the image loader for non-React source code
+ // ie we don't want to use ideal image loader for CSS files...
+ // See https://github.com/facebook/docusaurus/issues/10862
+ issuer: {
+ and: [/\.(?:tsx?|jsx?|mdx?)$/i],
+ },
use: [
require.resolve('@docusaurus/lqip-loader'),
{
diff --git a/website/_dogfooding/_docs tests/tests/images/img-tests.css b/website/_dogfooding/_docs tests/tests/images/img-tests.css
new file mode 100644
index 000000000000..1c042465d0aa
--- /dev/null
+++ b/website/_dogfooding/_docs tests/tests/images/img-tests.css
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.dogfood-image-test-css {
+ background-image: url('./img/oss_logo.png');
+ background-size: contain;
+}
diff --git a/website/_dogfooding/_docs tests/tests/img/oss_logo (2).png b/website/_dogfooding/_docs tests/tests/images/img/oss_logo (2).png
similarity index 100%
rename from website/_dogfooding/_docs tests/tests/img/oss_logo (2).png
rename to website/_dogfooding/_docs tests/tests/images/img/oss_logo (2).png
diff --git a/website/_dogfooding/_docs tests/tests/img/oss_logo.png b/website/_dogfooding/_docs tests/tests/images/img/oss_logo.png
similarity index 100%
rename from website/_dogfooding/_docs tests/tests/img/oss_logo.png
rename to website/_dogfooding/_docs tests/tests/images/img/oss_logo.png
diff --git a/website/_dogfooding/_docs tests/tests/img-tests.mdx b/website/_dogfooding/_docs tests/tests/images/index.mdx
similarity index 62%
rename from website/_dogfooding/_docs tests/tests/img-tests.mdx
rename to website/_dogfooding/_docs tests/tests/images/index.mdx
index bddaf876340e..77621a12b712 100644
--- a/website/_dogfooding/_docs tests/tests/img-tests.mdx
+++ b/website/_dogfooding/_docs tests/tests/images/index.mdx
@@ -2,7 +2,7 @@
image: ./img/oss_logo.png
---
-# Image tests
+# Image Tests
import Image from '@theme/IdealImage';
@@ -14,6 +14,8 @@ export const docusaurusRequire = require('@site/static/img/docusaurus.png');
## Regular images
+Those only render in DEV when IdealImage plugin is disabled.
+
@@ -23,3 +25,13 @@ export const docusaurusRequire = require('@site/static/img/docusaurus.png');