diff --git a/components/Current/Asides/Puff/index.tsx b/components/Current/Asides/Puff/index.tsx index ac2054e42..ce0dea538 100644 --- a/components/Current/Asides/Puff/index.tsx +++ b/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 ))} diff --git a/components/Current/Footer/index.tsx b/components/Current/Footer/index.tsx index 31e641d7d..6b633a29a 100644 --- a/components/Current/Footer/index.tsx +++ b/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(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" /> Scandic
@@ -113,7 +111,6 @@ export default async function Footer({ lang }: LangParams) { footerData.app_downloads.google_play.imageConnection .edges[0].node.url } - unoptimized width={135} /> @@ -240,7 +237,6 @@ display: none; alt="Trip Advisor logotype" height={24} src={footerData.trip_advisor.logoConnection.edges[0].node.url} - unoptimized width={160} />
diff --git a/components/Current/Hero/index.tsx b/components/Current/Hero/index.tsx index 5d08b5bc5..10d06ab8e 100644 --- a/components/Current/Hero/index.tsx +++ b/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} /> ))} diff --git a/components/Image/index.tsx b/components/Image/index.tsx new file mode 100644 index 000000000..d237a6d68 --- /dev/null +++ b/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 ( + + ) +} diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx index 256887d83..ba6523174 100644 --- a/components/JsonToHtml/renderOptions.tsx +++ b/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} /> )