Merged in fix/image-loader (pull request #22)

fix: add ? to src on image as contentstack cannot handle &

Approved-by: Michael Zetterberg

components/Current/Asides/Puff/index.tsx

@@ -1,12 +1,12 @@
 import { renderOptions } from "./renderOptions"
 
-import Image from "next/image"
 import JsonToHtml from "@/components/JsonToHtml"
 import Link from "next/link"
 
 import styles from "./puff.module.css"
 
 import type { PuffProps } from "@/types/components/current/asides/puff"
+import Image from "@/components/Image"
 
 export default function Puff({ imageConnection, is_internal, link, link_text, pageConnection, text, title }: PuffProps) {
   if (is_internal) {
@@ -46,7 +46,6 @@ function PuffContent({ imageConnection, text, title }: Pick<PuffProps, "imageCon
           height={image.node.dimension.height}
           key={image.node.system.uid}
           src={image.node.url}
-          unoptimized
           width={image.node.dimension.width}
         />
       ))}

components/Current/Footer/index.tsx

@@ -1,10 +1,12 @@
 import { request } from "@/lib/request"
-import type { LangParams } from "@/types/params"
-import { GetFooterData } from "@/types/requests/footer"
 import { GetFooter } from "@/lib/graphql/Query/Footer.graphql"
-import Script from "next/script"
+
-import Image from "next/image"
+import Image from "@/components/Image"
 import Navigation from "./Navigation"
+import Script from "next/script"
+
+import type { GetFooterData } from "@/types/requests/footer"
+import type { LangParams } from "@/types/params"
 
 export default async function Footer({ lang }: LangParams) {
   const response = await request<GetFooterData>(GetFooter, {
@@ -23,19 +25,16 @@ export default async function Footer({ lang }: LangParams) {
             data-nosvgsrc="/Static/img/scandic-logotype-white.png" // what here?
             height="22"
             src={footerData.logoConnection.edges[0].node.url}
-            unoptimized
             width="102"
           />
           <span className="hidden--accessible">Scandic</span>
         </h2>
         <ul className="l-footer-sections">
-          {footerData.navigation.map((group) => {
+          {footerData.navigation.map((group) => (
-            return (
             <li className="global-footer-section" key={group.title}>
               <div className="link-list-top-header">{group.title}</div>
             </li>
-            )
+          ))}
-          })}
         </ul>
 
         <div
@@ -85,7 +84,6 @@ export default async function Footer({ lang }: LangParams) {
                             footerData.app_downloads.app_store.imageConnection
                               .edges[0].node.url
                           }
-                          unoptimized
                           width={135}
                         />
                       </a>
@@ -113,7 +111,6 @@ export default async function Footer({ lang }: LangParams) {
                             footerData.app_downloads.google_play.imageConnection
                               .edges[0].node.url
                           }
-                          unoptimized
                           width={135}
                         />
                       </a>
@@ -240,7 +237,6 @@ display: none;
               alt="Trip Advisor logotype"
               height={24}
               src={footerData.trip_advisor.logoConnection.edges[0].node.url}
-              unoptimized
               width={160}
             />
           </div>

components/Current/Hero/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import Image from "next/image"
+import Image from "@/components/Image"
 
 import styles from "./hero.module.css"
 
@@ -26,7 +26,6 @@ export default function Hero({ images }: HeroProps) {
                             height={image.dimension.height}
                             key={image.title}
                             src={image.url}
-                            unoptimized
                             width={image.dimension.width}
                           />
                         ))}

components/Image/index.tsx

@@ -0,0 +1,11 @@
+import NextImage, { type ImageProps } from "next/image"
+
+// Next/Image adds & instead of ? before the params
+export default function Image(props: ImageProps) {
+  return (
+    <NextImage
+      {...props}
+      src={`${props.src}?`}
+    />
+  )
+}

components/JsonToHtml/renderOptions.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image"
+import Image from "@/components/Image"
 import Link from "next/link"
 
 import { EmbedEnum } from "@/types/requests/utils/embeds"
@@ -54,7 +54,6 @@ export const renderOptions: RenderOptions = {
               className={styles.image}
               height={image.node.dimension.height}
               src={image?.node?.url}
-              unoptimized
               width={image.node.dimension.width}
             />
           )