How can I display private domain cdn images?

[jderboven]

Hello,

I'm trying to use import { Image } from '@unpic/react/nextjs';

My source comes from a private domain on my customer network, how can I disable cdn check so that my image is well displayed ? For now it comes with next/image and the url is encoded

Thanks for help

[ascorbic]

I don't fully understand. Are you using an image CDN? Is the private domain an image CDN or just static images?

[jderboven]

Actually that’s just a remote url on the customer network m not a static img

[ascorbic]

OK, can you explain exactly:

• what you do, i.e. the code
• what happens, i.e. what is rendered
• what you want to happen, i.e. what you want it to display

[jderboven]

Ok what I would like is the following :

• Use the package @unpic/react/nextjs to display an image
• Wrap this Image component within a use client component that I can use everywhere as a facade
• Provide a src to this Image which looks like this : http://dpifr-stage.lovelytruc.be/sites/default/v2/lifestyle_apps_4_3_portrait/2024/04/16/node_47/113/public/2024/04/16/21088323.jpeg?itok=1713272724

What happens : the image link gets decoded and put above some srcset like a normal next image with optimization.
What is rendered : nothing as it gets decoded and the link cannot be found
The code :

'use client';

import { blurhashToCssGradientString } from '@unpic/placeholder';
import { Image } from '@unpic/react/nextjs';

type ImageNextProps = {
  layout: 'fixed' | 'fullWidth' | 'constrained';
  src: string;
  alt: string;
  blurHash?: string;
  className?: string;
};

export const ImageNext = (props: ImageNextProps) => {
  const { layout, src, alt, blurHash = 'LEHV6nWB2yk8pyo0adR*.7kCMdn4', className = '' } = props;

  const placeholder = blurhashToCssGradientString(blurHash);

  return (
    <Image
      src={src}
      alt={alt}
      layout={layout}
      className={`image-next ${className}`}
      background={placeholder}
    />
  );
};