Fix bug with absolute image url by removing the hostname

Author: Maypher

src/app/(frontend)/[locale]/conclusion/page.tsx

@@ -5,7 +5,7 @@ import symbol from '@public/images/symbol.svg'
 import whiteLogo from '@public/images/logoWhite.svg'
 import { RichText } from '@payloadcms/richtext-lexical/react'
 import { Link } from '@/i18n/navigation'
-import Image from 'next/image'
+import Image from '@/components/global/Image'
 import { draftMode } from 'next/headers'
 
 export const dynamic = 'error'
@@ -57,7 +57,7 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
           <Image
             src={whiteLogo}
             alt="Vector: Interior Design"
-            className="h-10 self-start md:self-center w-fit"
+            className="h-10 self-center bg-vector-grey w-fit"
           />
           <div className="bg-vector-orange -bottom-15 absolute right-0 h-2 w-8"></div>
         </div>

src/app/(frontend)/[locale]/page.tsx

@@ -17,9 +17,8 @@ import { Link } from '@/i18n/navigation'
 
 import '@styles/descriptions.scss'
 import '@styles/nav.scss'
-import ImageSkeleton from '@/components/global/ImageSkeleton'
+import Image from '@/components/global/Image'
 import designer from '@public/images/tony.jpg'
-import Image from 'next/image'
 
 type MainPageImageType = NonNullable<MainPageImage['images']>[number]
 
@@ -78,9 +77,15 @@ function imageBlock(
               style={{ height: `${image.deskConfig.imgSize}svh` }}
               className="max-w-3/5 xl:max-w-11/20 2xl:max-w-full"
             >
-              <ImageSkeleton
-                image={image.image as Media}
-                sizes={`(min-width: 1280px) 55vw, (min-width: 1440px) 70vw, 60vw`}
+              <Image
+                src={imageFile.url!}
+                alt={imageFile.alt}
+                className="h-full w-auto object-contain"
+                width={imageFile.width!}
+                height={imageFile.height!}
+                placeholder="blur"
+                blurDataURL={imageFile.sizes!.loading!.url!}
+                sizes="(min-width: 1280px) 55vw, (min-width: 1440px) 70vw, 60vw"
               />
             </div>
             {image.description && descriptionPositionDesktop && (
@@ -102,9 +107,14 @@ function imageBlock(
             flexDirection: flexDirectionMobile,
           }}
         >
-          <ImageSkeleton
-            image={imageFile}
-            className="shrink"
+          <Image
+            src={imageFile.url!}
+            alt={imageFile.alt}
+            className="h-full w-auto object-contain shrink"
+            width={imageFile.width!}
+            height={imageFile.height!}
+            placeholder="blur"
+            blurDataURL={imageFile.sizes!.loading!.url!}
             sizes={overflowMobile ? '100vw' : '90vw'}
           />
           {image.description && descPosMobile && (
@@ -160,7 +170,16 @@ function navBlock(
           style={{ height: `${image.imgSize}%` }}
           className="relative max-xl:h-fit! max-xl:w-full lg:max-w-1/2 max-xl:max-w-none [&_img]:w-full!"
         >
-          <ImageSkeleton image={image.image as Media} sizes={`(max-width: 1024px) 100vw, 50vw`} />
+          <Image
+            src={imageFile.url!}
+            alt={imageFile.alt}
+            className="h-full w-auto object-contain"
+            width={imageFile.width!}
+            height={imageFile.height!}
+            placeholder="blur"
+            blurDataURL={imageFile.sizes!.loading!.url!}
+            sizes={`(max-width: 1024px) 100vw, 50vw`}
+          />
         </div>
 
         <ul className="flex items-center justify-center gap-5 p-5 text-xl lg:h-4/5">

src/app/(frontend)/[locale]/projects/[id]/page.tsx

@@ -8,16 +8,14 @@ import RefreshRouteOnSave from '@/components/admin/RefreshRouteOnSave'
 import headersConverter from '@/lib/utils/converter'
 
 import { ReactNode } from 'react'
-import ImageSkeleton from '@/components/global/ImageSkeleton'
 
 import '@styles/arrow.css'
 import '@styles/descriptions.scss'
 import { Link } from '@/i18n/navigation'
 import { draftMode } from 'next/headers'
 import { Metadata } from 'next'
 import { convertLexicalToPlaintext } from '@payloadcms/richtext-lexical/plaintext'
-import Image from 'next/image'
-
+import Image from '@/components/global/Image'
 interface Props {
   params: Promise<{
     locale: 'en' | 'es'
@@ -45,8 +43,12 @@ function DesktopImage(img: ProjectImage): ReactNode {
       style={{ flexDirection }}
     >
       {imageFile?.url ? (
-        <ImageSkeleton
-          image={imageFile}
+        <Image
+          src={imageFile.url!}
+          alt={imageFile.alt}
+          width={imageFile.width!}
+          height={imageFile.height!}
+          className="h-full w-auto object-contain"
           sizes={imageFile.width! <= imageFile.height! ? '40vw' : '70vw'}
           style={{ height: `${img.deskConf.imageSize}svh` }}
         />
@@ -209,10 +211,13 @@ const Page = async ({ params }: Props) => {
                 style={{ backgroundColor: image.bgColor }}
                 key={`${img.id}-mobile`}
               >
-                <ImageSkeleton
-                  image={imageFile}
-                  sizes={`(min-width: 1280px) 60vw, 75vw`}
-                  className="max-w-3/4 mx-auto xl:max-w-full md:h-80 md:w-auto"
+                <Image
+                  src={imageFile.url!}
+                  alt={imageFile.alt}
+                  width={imageFile.width!}
+                  height={imageFile.height!}
+                  className="max-w-3/4 mx-auto xl:max-w-full md:h-80 md:w-auto h-full w-auto object-contain"
+                  sizes="(min-width: 1280px) 60vw, 75vw"
                 />
 
                 <div className="px-8">

src/app/(frontend)/[locale]/sculptures/page.tsx

@@ -1,7 +1,7 @@
 import { getPayload } from 'payload'
 import config from '@payload-config'
 import { Media, Sculpture } from '@/payload-types'
-import Image from 'next/image'
+import Image from '@/components/global/Image'
 import { RichText } from '@payloadcms/richtext-lexical/react'
 import ScrollToTop from '@/components/sculptures/ScrollToTop'
 import { draftMode } from 'next/headers'

src/components/carousel.tsx

@@ -4,7 +4,7 @@ import '@styles/glide.css'
 import Glide, { Controls, Swipe, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm'
 import '@glidejs/glide/dist/css/glide.core.min.css'
 import { Media } from '@/payload-types'
-import Image from 'next/image'
+import Image from '@/components/global/Image'
 import { useEffect } from 'react'
 import { Link } from '@/i18n/navigation'
 import { useLocale } from 'next-intl'

src/components/global/Header.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import Image from 'next/image'
+import Image from '@/components/global/Image'
 import logo from '@public/images/logo.svg'
 import LanguageSelect from './LanguageSelect'
 import { useState, useEffect, useRef } from 'react'

src/components/global/Image.tsx

@@ -0,0 +1,25 @@
+import ReactImage from 'next/image'
+import '@styles/skeleton.scss'
+
+type ImageProps = React.ComponentPropsWithoutRef<typeof ReactImage>
+
+/**
+ * This wrapper around Next's `Image` component that
+ * removes the website's hostname (Indicated by `process.env.NEXT_PUBLIC_PAYLOAD_URL`)
+ * from an image URL so that it becomes relative to avoid issues with remotePatterns and docker containers.
+ * It accepts all the props `Image` accepts and does src.replace(process.env.NEXT_PUBLIC_PAYLOAD_URL || '', '')
+ * to remove the hostname.
+ */
+export default function Image({ ...props }: ImageProps) {
+  return (
+    <ReactImage
+      {...props}
+      src={
+        typeof props.src === 'string'
+          ? props.src.replace(process.env.NEXT_PUBLIC_PAYLOAD_URL || '', '')
+          : props.src
+      }
+      blurDataURL={props.blurDataURL?.replace(process.env.NEXT_PUBLIC_PAYLOAD_URL || '', '')}
+    />
+  )
+}

src/components/global/ImageSkeleton.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import Image from 'next/image'
+import Image from '@/components/global/Image'
 import logoWhite from '@public/images/logoWhite.svg'
 import { useTranslations } from 'next-intl'
 

src/components/mainPage/Footer.tsx

@@ -2,7 +2,7 @@
 
 import '@styles/nav.scss'
 
-import Image from 'next/image'
+import Image from '@/components/global/Image'
 import symbol from '@public/images/symbol.svg'
 import { useEffect } from 'react'