Fix a BannerPage background issue (#2651)

* do not double up on url(...)

* turn off image opt locally by default

Author: ChristopherChudzicki

env/frontend.env

@@ -1,7 +1,7 @@
 NODE_ENV=development
 PORT=8062
 SENTRY_ENV=dev # Re-enable sentry
-NEXT_PUBLIC_OPTIMIZE_IMAGES="true"
+NEXT_PUBLIC_OPTIMIZE_IMAGES="false"
 
 # Environment variables with `NEXT_PUBLIC_` prefix are exposed to the client side
 NEXT_PUBLIC_ORIGIN=${MITOL_APP_BASE_URL}

frontends/ol-components/src/components/Banner/Banner.tsx

@@ -11,11 +11,21 @@ const SubHeader = styled(Typography)({
 })
 
 type BannerBackgroundProps = {
+  /**
+   * Background image src, url(...), or image-set(...).
+   */
   backgroundUrl?: string
   backgroundSize?: string
   backgroundDim?: number
 }
 
+const standardizeBackgroundUrl = (url: string) => {
+  if (url.startsWith("url(") || url.startsWith("image-set(")) {
+    return url
+  }
+  return url.startsWith("image-set(") ? url : `url('${url}')`
+}
+
 /**
  * This is a full-width banner component that takes a background image URL.
  */
@@ -26,9 +36,7 @@ const BannerBackground = styled.div<BannerBackgroundProps>(
     backgroundSize = "cover",
     backgroundDim = 0,
   }) => {
-    const backgroundUrlFn = backgroundUrl.startsWith("image-set(")
-      ? backgroundUrl
-      : `url('${backgroundUrl}')`
+    const backgroundUrlFn = standardizeBackgroundUrl(backgroundUrl)
 
     return {
       backgroundAttachment: "fixed",