是否可以制作没有模糊的 Next.js Image 占位符？

Posted 2023-03-30

【中文标题】是否可以制作没有模糊的 Next.js Image 占位符？

【英文标题】：Is it possible to make Next.js Image placeholder without blur?

【发布时间】：2021-10-13 00:47:10

【问题描述】：

我在我的项目中使用 Next.js。 Next.js 图像组件具有占位符和 blurDataURL 属性，这种组合效果很好，但是如果我想从 SVG (SVG->base64) 添加自定义占位符，我得到了模糊的结果。

我所有尝试查找禁用模糊效果的信息的尝试都失败了...有人可以帮助我吗？提前致谢！

【参考方案1】：

next/image 默认占位符为空（模糊关闭），如果您想在加载图像时将某些内容作为占位符，您可以向组件添加一个类，例如

import NextImage from 'next/image' //next component name it whatever
import styles from 'styles/mycss.module.css' //path to css file

<NextImage src="/url" className=styles.nextImageBackground layout="fill"/>

//css file
.nextImageBackground
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjI0IDM4Ny44MTRWNTEyTDMyIDMyMGwxOTItMTkydjEyNi45MTJDNDQ3LjM3NSAyNjAuMTUyIDQzNy43OTQgMTAzLjAxNiAzODAuOTMgMCA1MjEuMjg3IDE1MS43MDcgNDkxLjQ4IDM5NC43ODUgMjI0IDM4Ny44MTR6Ii8+PC9zdmc+')