diff --git a/src/pages/assets.tsx b/src/pages/assets.tsx index 81e0f3fdb7f..c606220090c 100644 --- a/src/pages/assets.tsx +++ b/src/pages/assets.tsx @@ -140,6 +140,11 @@ export const getStaticProps = (async ({ locale }) => { }) satisfies GetStaticProps const AssetsPage = () => { + // Ignore locale in the URL for SVG path in public directory to fix broken link + // SVG path changes from /en/images => /images + const svgPathFromOrigin = + typeof window !== `undefined` ? window.location.origin : "" + const { t } = useTranslation("page-assets") const assetPageHeroImage = useColorModeValue( ethDiamondBlack, @@ -389,19 +394,19 @@ const AssetsPage = () => { title={t("page-assets-eth-diamond-glyph")} alt={t("page-assets-eth-diamond-glyph")} image={ethDiamondGlyph} - svgUrl="/images/assets/svgs/eth-diamond-glyph.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/eth-diamond-glyph.svg`} /> @@ -409,13 +414,13 @@ const AssetsPage = () => { title={t("page-assets-eth-diamond-purple")} alt={t("page-assets-eth-diamond-purple")} image={ethDiamondPurple} - svgUrl="/images/assets/svgs/eth-diamond-purple.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/eth-diamond-purple.svg`} /> @@ -423,19 +428,19 @@ const AssetsPage = () => { title={t("page-assets-eth-logo-portrait-gray")} alt={t("page-assets-eth-logo-portrait-gray")} image={ethPortraitBlack} - svgUrl="/images/assets/svgs/ethereum-logo-portrait-black.svg " + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/ethereum-logo-portrait-black.svg `} /> @@ -443,19 +448,19 @@ const AssetsPage = () => { title={t("page-assets-eth-logo-portrait-purple")} alt={t("page-assets-eth-logo-portrait-purple")} image={ethPortraitPurple} - svgUrl="/images/assets/svgs/ethereum-logo-portrait-purple.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/ethereum-logo-portrait-purple.svg`} />

{t("page-assets-page-assets-solid-background")}

@@ -464,19 +469,19 @@ const AssetsPage = () => { title={t("page-assets-eth-diamond-white")} alt={t("page-assets-eth-diamond-white")} image={ethDiamondBlackWhite} - svgUrl="/images/assets/svgs/eth-diamond-black-white.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/eth-diamond-black-white.svg`} /> @@ -485,13 +490,13 @@ const AssetsPage = () => { title={t("page-assets-eth-diamond-white")} alt={t("page-assets-eth-diamond-white")} image={ethDiamondPurpleWhite} - svgUrl="/images/assets/svgs/eth-diamond-purple-white.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/eth-diamond-purple-white.svg`} /> @@ -499,19 +504,19 @@ const AssetsPage = () => { title={t("page-assets-eth-logo-portrait-gray")} alt={t("page-assets-eth-logo-portrait-gray")} image={ethPortraitBlackGray} - svgUrl="/images/assets/svgs/ethereum-logo-portrait-black-gray.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/ethereum-logo-portrait-black-gray.svg`} /> @@ -519,19 +524,19 @@ const AssetsPage = () => { title={t("page-assets-eth-logo-portrait-purple")} alt={t("page-assets-eth-logo-portrait-purple")} image={ethPortraitPurplePurple} - svgUrl="/images/assets/svgs/ethereum-logo-portrait-purple-purple.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/ethereum-logo-portrait-purple-purple.svg`} /> @@ -539,13 +544,13 @@ const AssetsPage = () => { title={t("page-assets-eth-logo-landscape-white")} alt={t("page-assets-eth-logo-landscape-white")} image={ethLandscapePurpleWhite} - svgUrl="/images/assets/svgs/ethereum-logo-landscape-purple-white.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/ethereum-logo-landscape-purple-white.svg`} />

{t("page-assets-illustrations")}

@@ -559,7 +564,7 @@ const AssetsPage = () => { title={t("page-assets-merge-panda")} alt={t("page-assets-merge-panda")} image={mergePanda} - svgUrl="/images/assets/svgs/merge-panda.svg" + svgUrl={`${svgPathFromOrigin}/images/assets/svgs/merge-panda.svg`} />