Is it possible to make Next.js Image placeholder without blur?

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