Rendering an Image from a Portable Text Field

[kerns]

Hoping you or someone else might be able to help me better understand the expected behavior when using next-sanity-image on an image block from a portable text field....to determine if my issues are resolvable.

For some reason, no matter what I do, I have images being served from Sanity's CDN. Even when I explicitly set useCdn to false. The lqip feature and blur up is also not working.

I use next-sanity-image as following in a component called PortableTextImage.js

import sanityClient from '@lib/sanityClient';
import Image from 'next/image';
import { useNextSanityImage } from 'next-sanity-image';

const PortableTextImage = (props) => {
  const configuredSanityClient = sanityClient;
  const imageProps = useNextSanityImage(configuredSanityClient, props);
  const caption = props.description || (props.asset && props.asset.description) || null;

  return (
    <div className="md:-mx-16 lg:-mx-32">
      <Image
        {...imageProps}
        className="w-full"
        sizes="(max-width: 800px) 100vw, 1200px"
        blurDataURL="props.lqip"
        placeholder="blur"
        // render an alt tag conditionally
        alt={props.alt || props.description || props.asset.alt || props.asset.title || props.asset.description || 'Sorry, alt text for this image is missing.'}
      />
      {caption ? ( 
        <div className="text-sm lg:text-lg font-serif italic -mt-4 text-stone-500 relative md:mx-16 lg:mx-32">{caption}</div>
      ) : null}
    </div>
  );
};

export default PortableTextImage;

My image renders as follows...

...and again, no lqip ...I am throttling the connection to confirm. I took this from development but it's the same in production.

Other relevant pieces of this puzzle might include my use of react-portable-text, used as follows to pass / parse the field and use my PortableTextImage component.

{pageData.body ? (
  <PortableText
    content={pageData.body}
    projectId={process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}
    dataset={process.env.NEXT_PUBLIC_SANITY_DATASET}
    serializers={{
      image: (props) => {
        return <PortableTextImage {...props} />;
      },
    }}
  />
) : null}

Since you just bumped the version I thought I should dbl check that I am using it correctly and have not stumbled on to a bug.

[lorenzodejong]

Even though it's a pretty specific situation/issue you're having i'll try my best to give you a path forward. In general it's always a good idea to try to isolate the issue. Try rendering the component in its most simple form, just a next/img component passing the props from next-sanity-image and start adding layers until you hit the problem scenario.

Besides that one thing i'm noticing from your code is that you're passing the blurDataUrl using blurDataURL="props.lqip". I assume this should be blurDataURL={props.lqip}. Not sure if this is a copy/paste/modify mistake from your example or if this is in your actual code.

Apart from that try to log the props.lqip, check if the data URL you're getting is valid (try to open it in your browser).

I'm not sure what the react-portable-text library does under the hood, but it might have something to do with their serialization logic.

Perhaps i could help you out further if you provide a running example in a Codesandbox. Make sure to leave out your environment variables though!

[kerns]

Lorenzo, your questions and comments are helpful, very appreciated. You rightly caught the obvious issue with how I was calling the lqip... yep, my actual code. 🙈 and after logging with a little more care I found it @ props.asset.metadata.lqip...and it's working, ...blur is working.🙏

So I am down to trying to understand why no matter what I do, images are served from the CDN...and not consumed and cached by next.js at build.

Maybe worth noting I am not deploying with Vercel, rather just pushing to Dokku on my own server, which is basically a dockerized Heroku.

This is probably outside the scope of next-sanity-image so maybe I should take it up in the Slack and see if anyone can point me in the right direction. If you have any advice on this, it's welcome, ...but I won't take up more of your time otherwise.

[lorenzodejong]

Happy to help!

Regarding your question about caching images locally, the goal of this library is actually to serve images (directly) from the Sanity CDN in a responsive manner. If your goal is to cache/optimize images locally you may want to go for an alternative solution.

I have not tried this so i can't really give you an in-depth instruction, but if you provide next/image with an absolute URL to an external image it does seem like it will use the internal image optimization API: https://nextjs.org/docs/basic-features/image-optimization#domains. However i'm not sure if this will also cache the image locally.

It also shouldn't really matter that much in terms of functionality. Images cached during a Next.js build are also served from a CDN (at least if you're using a hosting like Vercel or similar), just like the Sanity CDN does. In the end it comes down to preference where to host/serve images from and the desired API and/or functionalities for image mutation/optimisation.

[kerns]

Images cached during a Next.js build are also served from a CDN (at least if you're using a hosting like Vercel or similar)

That was the issue... I'm not. :) I'm pushing to Dokku which is (an amazing) sort of self-hosted Heroku... This is not a high traffic / volume site, just a local clinic... so visits to the site might peak at a few hundred a day.

So yeah I just thought, keep everything together... don't risk flirting with bandwidth limits of Sanity's free tier, and let Next.js optimize and serve without warming up a CDN. Given the lack of traffic I'm not sure a CDN wouldn't actually be slower, as they tend to perform better when kept warm.🥶

But thanks again and I will just see about passing it directly to next/image? Maybe that is all that's needed. 🙏