下载时如何在 NextJS 中显示图像的模糊版本？

Question

我正在寻找与下面类似的效果：

我对 Gatsby 做了类似的事情，但我想知道这是否可以与 NextJS 一起做？

Answer 1

对于 10.2 以上的版本，Nextjs 在 Image 组件中提供了内置的模糊图像。花了几个小时后我发现了这篇文章

首先，您需要将 nextJs 应用程序更新到 10.2.4 或更高版本。

yarn add next@10.2.4

然后使用两个附加属性blurDataURL和placeholder来实现你的nextJs Image组件。检查下面的代码示例。

<Image
   className="image-container"
   src="/images/high-quality-image.jpg"
   width={250}
   height={240}
   quality={75}
   blurDataURL="/images/path-to-blur-image.jpg"
   placeholder="blur"
/>

Next.js 更新：

Next.js 现在支持 placeholder="blur" 你可以在图像组件中使用它：

<Image src={author} alt="Picture of the author" placeholder="blur" />

Answer 2

您无需使用外部库即可完成此操作，代码不多。

https://codepen.io/darajava/pen/GRZzpbB?editors=0110

我也在加载时添加了动画。图像将适合其父容器的宽度。用法很简单：

<LoadImage largeImageSrc={url} smallImageSrc={url} />

Answer 3

您应该使用 React 渐进式图像加载。

安装：

npm install react-progressive-image-loading --save

进口：

import ProgressiveImage from "react-progressive-image-loading";

用：

<ProgressiveImage
    preview="/images/prevImage.png"
    src="/images/image.png"
    render={(src, style) => <img src={src} style={style} />}
/>

您也应该使用带有 div 的背景图像。

<ProgressiveImage
    preview="/images/prevImage.png"
    src="/images/iamge.png"
    render={(src, style) => <div style={Object.assign(style, { backgroundImage: `url(${src})` })} />}
/>

您应该自定义过渡时间。

<ProgressiveImage
    preview="/images/tiny-preview.png"
    src="/images/preview.png"
    transitionTime={500}
    transitionFunction="ease"
    render={(src, style) => <img src={src} style={style} />}
/>

Answer 4

在 Next.js v11 中，这是内部支持的：

import Image from 'next/image';
import someImg from 'path/to/some/image.png';

// ...

<Image src={someImg} placeholder="blur" />

参考：

• https://nextjs.org/blog/next-11#image-placeholders
• https://nextjs.org/docs/api-reference/next/image#placeholder

此外，本期讨论了很多替代方案，如果您使用较低版本或尝试将其与非静态图像一起使用，这会很有帮助。

官方演示： https: //image-component.nextjs.gallery/placeholder

如果您愿意，可以将示例动画化：（相关）

import Image from 'next/image';
import { useState } from 'react';

import ViewSource from '../components/view-source';
import mountains from '../public/mountains.jpg';

const PlaceholderBlur = () => {
  const [loaded, setLoaded] = useState(false);

  return (
    <>
      <ViewSource pathname="pages/placeholder.js" />
      <h1>Image Component With Placeholder Blur</h1>
      <Image
        alt="Mountains"
        src={mountains}
        placeholder="blur"
        width={700}
        height={475}
        className={loaded ? 'unblur' : ''}
        onLoadingComplete={() => setLoaded(true)}
      />
      <style jsx global>{`
        .unblur {
          animation: unblur 1s linear;
        }

        @keyframes unblur {
          from {
            filter: blur(20px);
          }
          to {
            filter: blur(0);
          }
        }
      `}</style>
    </>
  );
};

export default PlaceholderBlur;

结果：

这与其他选项相比如何？

• 您可以继续使用很棒的标签next/image，而不是未优化的img标签或不太优化的第三方实现。

• 无需添加额外的依赖项，即包大小不会受到太大影响。

• 无需手动生成小图像来显示预览。Next.js 会自动为您生成一个非常小的（<10px）图像。