From e17784effa2c370d81c7806c22ad19c6dce4a1cc Mon Sep 17 00:00:00 2001
From: Zwyx <29386932+Zwyx@users.noreply.github.com>
Date: Thu, 5 Oct 2023 20:21:27 +0800
Subject: [PATCH] fix(mdx-loader): prevent Open Graph images from being
 inserted as base64 (#9369)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
---
 packages/docusaurus-mdx-loader/src/loader.ts  | 7 ++++---
 packages/docusaurus-utils/src/webpackUtils.ts | 4 ++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-mdx-loader/src/loader.ts b/packages/docusaurus-mdx-loader/src/loader.ts
index 7b428646c74c..fab2f63ab9d3 100644
--- a/packages/docusaurus-mdx-loader/src/loader.ts
+++ b/packages/docusaurus-mdx-loader/src/loader.ts
@@ -28,7 +28,7 @@ import type {LoaderContext} from 'webpack';
 type Pluggable = any; // TODO fix this asap
 
 const {
-  loaders: {inlineMarkdownImageFileLoader},
+  loaders: {inlineMarkdownAssetImageFileLoader},
 } = getFileLoaderUtils();
 
 export type MDXPlugin = Pluggable;
@@ -92,8 +92,9 @@ function createAssetsExportCode(assets: unknown) {
     if (typeof assetValue === 'string' && assetValue.startsWith('./')) {
       // TODO do we have other use-cases than image assets?
       // Probably not worth adding more support, as we want to move to Webpack 5 new asset system (https://github.com/facebook/docusaurus/pull/4708)
-      const inlineLoader = inlineMarkdownImageFileLoader;
-      return `require("${inlineLoader}${escapePath(assetValue)}").default`;
+      return `require("${inlineMarkdownAssetImageFileLoader}${escapePath(
+        assetValue,
+      )}").default`;
     }
     return undefined;
   }
diff --git a/packages/docusaurus-utils/src/webpackUtils.ts b/packages/docusaurus-utils/src/webpackUtils.ts
index c73193da1cd4..c1195d5764b3 100644
--- a/packages/docusaurus-utils/src/webpackUtils.ts
+++ b/packages/docusaurus-utils/src/webpackUtils.ts
@@ -20,6 +20,7 @@ type FileLoaderUtils = {
     file: (options: {folder: AssetFolder}) => RuleSetRule;
     url: (options: {folder: AssetFolder}) => RuleSetRule;
     inlineMarkdownImageFileLoader: string;
+    inlineMarkdownAssetImageFileLoader: string;
     inlineMarkdownLinkFileLoader: string;
   };
   rules: {
@@ -74,6 +75,9 @@ export function getFileLoaderUtils(): FileLoaderUtils {
     )}?limit=${urlLoaderLimit}&name=${fileLoaderFileName(
       'images',
     )}&fallback=${escapePath(require.resolve('file-loader'))}!`,
+    inlineMarkdownAssetImageFileLoader: `!${escapePath(
+      require.resolve('file-loader'),
+    )}?name=${fileLoaderFileName('images')}!`,
     inlineMarkdownLinkFileLoader: `!${escapePath(
       require.resolve('file-loader'),
     )}?name=${fileLoaderFileName('files')}!`,