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

Question

I'm using Next.js for my projects. Next.js Image component has placeholder and blurDataURL attrs and this combination works very well, but if I want to add my custom placeholder from SVG (SVG->base64) I got blured result.

All my attempts to find information for disabling blur effect was failed... Anybody could help me? Thanks in advance!

Answer 1

next/image default placeholder is empty (blur off), if you want to put something as a placeholder while the images load you can add a class to the component something like

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