diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 92f0b5147c158..d242b731f2501 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -1,6 +1,5 @@ import React from 'react' import Head from '../shared/lib/head' -import { toBase64 } from '../shared/lib/to-base-64' import { ImageConfigComplete, imageConfigDefault, @@ -535,7 +534,7 @@ export default function Image({ padding: 0, } let hasSizer = false - let sizerSvg: string | undefined + let sizerSvgUrl: string | undefined const imgStyle: ImgElementStyle = { position: 'absolute', top: 0, @@ -596,7 +595,8 @@ export default function Image({ wrapperStyle.maxWidth = '100%' hasSizer = true sizerStyle.maxWidth = '100%' - sizerSvg = `` + // url encoded svg is a little bit shorten than base64 encoding + sizerSvgUrl = `data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%27${widthInt}%27 height=%27${heightInt}%27/%3e` } else if (layout === 'fixed') { // wrapperStyle.display = 'inline-block' @@ -661,7 +661,7 @@ export default function Image({ {hasSizer ? ( - {sizerSvg ? ( + {sizerSvgUrl ? ( ) : null} diff --git a/packages/next/shared/lib/to-base-64.ts b/packages/next/shared/lib/to-base-64.ts deleted file mode 100644 index f1fc94e1dbd87..0000000000000 --- a/packages/next/shared/lib/to-base-64.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Isomorphic base64 that works on the server and client - */ -export function toBase64(str: string) { - if (typeof window === 'undefined') { - return Buffer.from(str).toString('base64') - } else { - return window.btoa(str) - } -}