From 8caa4b2e2f84617e867ac1a8df413b5dd4027f50 Mon Sep 17 00:00:00 2001
From: eecavanna <eecavanna@users.noreply.github.com>
Date: Sat, 28 Oct 2023 19:27:14 -0700
Subject: [PATCH] Fix bug resulting in incorrect `img` `src` URLs in production

---
 src/components/CustomToast.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/CustomToast.tsx b/src/components/CustomToast.tsx
index ebd1311..d3d4f61 100644
--- a/src/components/CustomToast.tsx
+++ b/src/components/CustomToast.tsx
@@ -8,6 +8,15 @@ interface Props {
   variant?: ToastProps["bg"];
 }
 
+// Get an explicit reference to the globally-injected public base path.
+//
+// Note: This is to work around the fact that vite does not seem to automatically prepend the base path to
+//       `<img src="..."/>` paths, which breaks those paths when deployed to a subdirectory (of a domain).
+//
+// Reference: https://vitejs.dev/guide/build.html#public-base-path
+//
+const BASE_URL = import.meta.env.BASE_URL;
+
 const CustomToast = ({
   onClose,
   isVisible,
@@ -19,7 +28,7 @@ const CustomToast = ({
     <Toast onClose={onClose} show={isVisible} autohide bg={variant}>
       <Toast.Header>
         <img
-          src={"/logo-512x512.png"}
+          src={`${BASE_URL}/logo-512x512.png`}
           className={"rounded me-2"}
           style={{ height: 16, width: 16 }}
           alt={"Monocle logo"}