NextJS 14 幅清晰的模糊图像 io

Question

我正在尝试在初始渲染时获得模糊的 lqip 图像。然后真实的图像加载在顶部，全部来自 sanity io。

但是，下面的代码似乎不起作用，控制台记录的blurUrl确实显示了base 64字符串。

我在慢速 3g 上进行了测试，图像不会从模糊开始。

有什么想法吗？

const Header = ({ height = 'h-[420px]', title, className, image, tag = 'Flights' }: props) => {

  const imageUrl = urlFor(image).width(2000).height(400).dpr(2).quality(100).url() || 
  const blurUrl = image?.asset?.metadata?.lqip || ''

    return (
    <section
      className={`relative w-screen h-[150px] sm:h-[300px] ${className} z-0 bg-slate-5`}
    >
      <Image
        priority
        src={imageUrl || ''}
        blurDataURL={blurUrl}
        fill
        alt="hero image example"
      />
    </section>
  );
};

export default Header;

Answer 1

我访问了 Sanity IO 的主页并注意到他们的最新发行说明。 他们提到：

该库的 5.0.0 版本已删除对模糊选项的支持。

但正如我所见，您已经在使用他们的 lqip 版本。他们还提供了一种更高级的方法，即“blurHash”，我建议您尝试一下！

既然您已经检查过blurUrl 是否正常工作。我怀疑您错过了一些小问题，例如以下可能的情况：

1. 检查您的进口声明：

   import Image from 'next/image';

   。
2. 检查您是否正确地将

   imageProps

   添加到图像中。

const imageProps = useNextSanityImage(configuredSanityClient, mySanityData.image);

    return (
        <Img
            {...imageProps}
            style={{ width: '100%', height: 'auto' }} // layout="responsive" prior to Next 13.0.0
            sizes="(max-width: 800px) 100vw, 800px"
            placeholder="blur"
            blurDataURL={mySanityData.image.asset.metadata.lqip}
        />
    );