[frontend] Pass down image optimization requests to imageprovider in checkoutitem component

CHANGELOG.md

@@ -19,6 +19,8 @@ the release.
   ([#1519](https://github.com/open-telemetry/opentelemetry-demo/pull/1519))
 * [flagd] export flagd traces to otel collector
   ([#1522](https://github.com/open-telemetry/opentelemetry-demo/pull/1522))
+* [frontend] Pass down image optimization requests to imageprovider in checkoutitem component
+  ([#1522](https://github.com/open-telemetry/opentelemetry-demo/pull/1522))
 
 ## 1.9.0
 

src/frontend/components/CheckoutItem/CheckoutItem.tsx

@@ -14,6 +14,30 @@ interface IProps {
   address: Address;
 }
 
+interface ImageLoaderProps {
+  src: string;
+  width: number;
+  quality?: number;
+}
+/**
+ * We connect to imageprovider through the envoy proxy, straight from the browser, for this we need to know the current hostname and port.
+ * During building and serverside rendering, these are undefined so we use some conditionals and default values.
+ */
+let hostname = "";
+let port = 80;
+let protocol = "http";
+
+if (typeof window !== "undefined" && window.location) {
+  hostname = window.location.hostname;
+  port = window.location.port ? parseInt(window.location.port, 10) : (window.location.protocol === "https:" ? 443 : 80);
+  protocol = window.location.protocol.slice(0, -1); // Remove trailing ':'
+}
+const imageLoader = ({ src, width, quality }: ImageLoaderProps): string => {
+  // We pass down the optimization request to the iamgeprovider service here, without this, nextJs would trz to use internal optimizer which is not working with the external imageprovider.
+  return `${protocol}://${hostname}:${port}/${src}?w=${width}&q=${quality || 75}`;
+}
+
+
 const CheckoutItem = ({
   checkoutItem: {
     item: {
@@ -29,7 +53,7 @@ const CheckoutItem = ({
   return (
     <S.CheckoutItem data-cy={CypressFields.CheckoutItem}>
       <S.ItemDetails>
-        <S.ItemImage src={"/images/products/" + picture} alt={name} />
+        <S.ItemImage src={"/images/products/" + picture} alt={name} loader={imageLoader}/>
         <S.Details>
           <S.ItemName>{name}</S.ItemName>
           <p>Quantity: {quantity}</p>