是否可以使 Next.js 图像占位符不模糊？

Question

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

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

Answer 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+')
}