Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I display private domain cdn images? #129

Open
jderboven opened this issue Apr 20, 2024 · 4 comments
Open

How can I display private domain cdn images? #129

jderboven opened this issue Apr 20, 2024 · 4 comments

Comments

@jderboven
Copy link

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
Copy link
Owner

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

@jderboven
Copy link
Author

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

@ascorbic
Copy link
Owner

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
Copy link
Author

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}
    />
  );
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants