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

Question

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

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

Answer 1

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

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