3

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!

andrewnosov
  • 374
  • 4
  • 14
  • Im kinda amazed this is the only thread I can find talking about this. – barrylachapelle Oct 10 '22 at 22:14
  • @andrewnosov did you figure this out? It seems like they add a blur ontop of whatever image URL provide, which looks funky if I'm using solid color Base 64's – James May 22 '23 at 15:53

1 Answers1

-3

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+')
}
Eric Liao
  • 5
  • 1
  • 2