From a092a2af75594957164a207e2c29a6111e7749c2 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Sun, 20 Aug 2023 12:09:03 +0800
Subject: [PATCH] fix(markdown): handle data uri correctly, close #1393

---
 .../src/plugins/assetsPlugin/resolveLink.ts   |  7 +-
 .../tests/plugins/assetsPlugin.spec.ts        | 70 ++++++++++++-------
 2 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/packages/markdown/src/plugins/assetsPlugin/resolveLink.ts b/packages/markdown/src/plugins/assetsPlugin/resolveLink.ts
index e42da2a9ca..bec7c91c13 100644
--- a/packages/markdown/src/plugins/assetsPlugin/resolveLink.ts
+++ b/packages/markdown/src/plugins/assetsPlugin/resolveLink.ts
@@ -6,8 +6,11 @@ export const resolveLink = (
   link: string,
   relativePathPrefix: string,
   env: MarkdownEnv,
-  strict = false,
+  strict = false
 ): string => {
+  // do not resolve data uri
+  if (link.startsWith('data:')) return link
+
   // decode link to ensure bundler can find the file correctly
   let resolvedLink = decode(link)
 
@@ -23,7 +26,7 @@ export const resolveLink = (
   if (isRelativePath && env.filePathRelative) {
     resolvedLink = `${relativePathPrefix}/${path.join(
       path.dirname(env.filePathRelative),
-      resolvedLink,
+      resolvedLink
     )}`
   }
 
diff --git a/packages/markdown/tests/plugins/assetsPlugin.spec.ts b/packages/markdown/tests/plugins/assetsPlugin.spec.ts
index 7626b5ef92..7935a3b073 100644
--- a/packages/markdown/tests/plugins/assetsPlugin.spec.ts
+++ b/packages/markdown/tests/plugins/assetsPlugin.spec.ts
@@ -34,6 +34,8 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
       '![invalid](.../invalid.png)',
       '![汉字](.../汉字.png)',
       '![100%](.../100%.png)',
+      // data uri
+      '![data-uri](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==)',
     ]
 
     const testCases: {
@@ -77,6 +79,8 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
           '<img src="@source/sub/.../invalid.png" alt="invalid">',
           '<img src="@source/sub/.../汉字.png" alt="汉字">',
           '<img src="@source/sub/.../100%.png" alt="100%">',
+          // data uri
+          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==" alt="data-uri">',
         ],
       },
       {
@@ -116,6 +120,8 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
           '<img src="@foo/sub/.../invalid.png" alt="invalid">',
           '<img src="@foo/sub/.../汉字.png" alt="汉字">',
           '<img src="@foo/sub/.../100%.png" alt="100%">',
+          // data uri
+          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==" alt="data-uri">',
         ],
       },
       {
@@ -152,6 +158,8 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
           '<img src=".../invalid.png" alt="invalid">',
           '<img src=".../汉字.png" alt="汉字">',
           '<img src=".../100%.png" alt="100%">',
+          // data uri
+          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==" alt="data-uri">',
         ],
       },
     ]
@@ -159,9 +167,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
     testCases.forEach(({ description, md, env, expected }) =>
       it(description, () => {
         expect(md.render(source.join('\n\n'), env)).toEqual(
-          expected.map((item) => `<p>${item}</p>`).join('\n') + '\n',
+          expected.map((item) => `<p>${item}</p>`).join('\n') + '\n'
         )
-      }),
+      })
     )
   })
 
@@ -236,6 +244,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
         '<img srcset="~@alias/foo.png 1x, ~@alias/汉字.png 2x, ~@alias/100%.png 3x" alt="attrs" src="~@alias/attrs.png" width="100px">',
         // keep as is
         '<img alt="attrs" src="" width="100px" srcset="/absolute.png 1x, no-prefix.png 2x, http://foobar.com/icon.png">',
+
+        /* data uri */
+        '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==">',
       ]
 
       const testCases: {
@@ -319,6 +330,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
             '<img srcset="~@alias/foo.png 1x, ~@alias/汉字.png 2x, ~@alias/100%.png 3x" alt="attrs" src="~@alias/attrs.png" width="100px">',
             // keep as is
             '<img alt="attrs" src="" width="100px" srcset="/absolute.png 1x, no-prefix.png 2x, http://foobar.com/icon.png">',
+
+            /* data uri */
+            '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==">',
           ],
         },
         {
@@ -398,6 +412,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
             '<img srcset="~@alias/foo.png 1x, ~@alias/汉字.png 2x, ~@alias/100%.png 3x" alt="attrs" src="~@alias/attrs.png" width="100px">',
             // keep as is
             '<img alt="attrs" src="" width="100px" srcset="/absolute.png 1x, no-prefix.png 2x, http://foobar.com/icon.png">',
+
+            /* data uri */
+            '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==">',
           ],
         },
         {
@@ -474,6 +491,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
             '<img srcset="~@alias/foo.png 1x, ~@alias/汉字.png 2x, ~@alias/100%.png 3x" alt="attrs" src="~@alias/attrs.png" width="100px">',
             // keep as is
             '<img alt="attrs" src="" width="100px" srcset="/absolute.png 1x, no-prefix.png 2x, http://foobar.com/icon.png">',
+
+            /* data uri */
+            '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==">',
           ],
         },
       ]
@@ -482,43 +502,43 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
         it(description, () => {
           // block
           expect(md.render(source.join('\n\n'), env)).toEqual(
-            expected.map((item) => `${item}`).join('\n'),
+            expected.map((item) => `${item}`).join('\n')
           )
 
           // block with leading white space
           expect(
-            md.render(source.map((item) => `   ${item}`).join('\n\n'), env),
+            md.render(source.map((item) => `   ${item}`).join('\n\n'), env)
           ).toEqual(expected.map((item) => `   ${item}`).join('\n'))
 
           // inline with prefix
           expect(
-            md.render(source.map((item) => `foo${item}`).join('\n\n'), env),
+            md.render(source.map((item) => `foo${item}`).join('\n\n'), env)
           ).toEqual(
-            expected.map((item) => `<p>foo${item}</p>`).join('\n') + '\n',
+            expected.map((item) => `<p>foo${item}</p>`).join('\n') + '\n'
           )
 
           // inline with suffix
           expect(
-            md.render(source.map((item) => `${item}foo`).join('\n\n'), env),
+            md.render(source.map((item) => `${item}foo`).join('\n\n'), env)
           ).toEqual(
-            expected.map((item) => `<p>${item}foo</p>`).join('\n') + '\n',
+            expected.map((item) => `<p>${item}foo</p>`).join('\n') + '\n'
           )
 
           // inline with line break
           expect(
             md.render(
               source.map((item) => item.replace('<img', '<img\n')).join('\n\n'),
-              env,
-            ),
+              env
+            )
           ).toEqual(
             expected
               .map((item) => `<p>${item.replace('<img', '<img\n')}</p>`)
-              .join('\n') + '\n',
+              .join('\n') + '\n'
           )
 
           // wrapped item
           expect(
-            md.render(source.map((item) => `<p>${item}</p>`).join('\n\n'), env),
+            md.render(source.map((item) => `<p>${item}</p>`).join('\n\n'), env)
           ).toEqual(expected.map((item) => `<p>${item}</p>`).join('\n'))
 
           // wrapped item with line break
@@ -527,20 +547,20 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
               source
                 .map((item) => `<p>${item.replace('<img', '<img\n')}</p>`)
                 .join('\n\n'),
-              env,
-            ),
+              env
+            )
           ).toEqual(
             expected
               .map((item) => `<p>${item.replace('<img', '<img\n')}</p>`)
-              .join('\n'),
+              .join('\n')
           )
 
           // wrapped multiple items
           expect(
             md.render(
               source.map((item) => `<p>${item}${item}</p>`).join('\n\n'),
-              env,
-            ),
+              env
+            )
           ).toEqual(expected.map((item) => `<p>${item}${item}</p>`).join('\n'))
 
           // deeply wrapped multiple items
@@ -549,14 +569,14 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
               source
                 .map((item) => `<p>\n<span>\n${item}\n${item}\n</span>\n</p>`)
                 .join('\n\n'),
-              env,
-            ),
+              env
+            )
           ).toEqual(
             expected
               .map((item) => `<p>\n<span>\n${item}\n${item}\n</span>\n</p>`)
-              .join('\n'),
+              .join('\n')
           )
-        }),
+        })
       )
     })
 
@@ -655,16 +675,16 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
         it(description, () => {
           // double quote
           expect(md.render(source.join('\n\n'), env)).toEqual(
-            expected.map((item) => `${item}`).join('\n') + '\n',
+            expected.map((item) => `${item}`).join('\n') + '\n'
           )
           // single quote
           expect(
-            md.render(source.join('\n\n').replace(/"/g, "'"), env),
+            md.render(source.join('\n\n').replace(/"/g, "'"), env)
           ).toEqual(
             expected.map((item) => `${item}`.replace(/"/g, "'")).join('\n') +
-              '\n',
+              '\n'
           )
-        }),
+        })
       )
     })
   })