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

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

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

我在Gatsby上做过类似的事情，但是我想知道NextJS可以做到吗？

解决方法

您应该使用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} />}
/>

您无需使用代码很少的外部库就可以做到这一点。

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

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

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

对于 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"
/>

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

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

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

解决方法

相关推荐