下载时如何在 NextJS 中呈现图像的模糊版本？答案

【问题标题】：How to present a blurred version of an image in NextJS as it's being downloaded?下载时如何在 NextJS 中呈现图像的模糊版本？
【发布时间】：2020-08-21 08:30:55
【问题描述】：

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

我对 Gatsby 做过类似的事情，但我想知道 NextJS 是否可以做到这一点？

【问题讨论】：

你必须创建2个版本的图像，通过img标签同时加载两个图像，当原始图像加载时隐藏模糊图像。您可以通过状态 <img src="original.png" onLoad={() => thi.setState({ loaded: true })} /> 管理隐藏
NextJS 11 提供了这样一个功能：nextjs.org/blog/next-11

标签： javascript reactjs image next.js blur

【解决方案1】：

您可以在不使用外部库且代码不多的情况下做到这一点。

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

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

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

【讨论】：

【解决方案2】：

你应该使用 React Progressive Image Loading。

安装：

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

【讨论】：

【解决方案3】：

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

首先你需要将你的 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"
/>

【讨论】：

【解决方案4】：

对于 Next.js v11，这是内部支持的：

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

// ...

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

参考资料：

此外，this issue 讨论了很多替代方案，如果您使用较低版本或尝试将其用于非静态图像，这可能会有所帮助。

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

The example 可以根据需要进行动画处理：(related)

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 会自动为您生成一个非常小的 (

【讨论】：

【解决方案5】：

import Image from 'next/image';
import imageUrlBuilder from '@sanity/image-url';

import sanity from '../../utils/sanity';

export function urlFor(source) {
  return imageUrlBuilder(sanity).image(source);
}

const SanityImage = ({ src, width, height, alt, ...props }) => (
  <Image
    src={urlFor(src).width(width).height(height).url()}
    width={width}
    height={height}
    layout="responsive"
    placeholder="blur"
    alt={alt || 'kickoff'}
    blurDataURL="/images/coverImage.png"
    {...props}
  />
);

export default SanityImage;

【讨论】：