fix(mdx-loader): prevent Open Graph images from being inserted as base64 (#9369)

Co-authored-by: sebastienlorber <[email protected]>

Author: Zwyx

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;
   }

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')}!`,