Можно ли сделать заполнитель изображения Next.js без размытия?

Question

Я использую Next.js в своих проектах. Компонент Next.js Image имеет заполнитель и атрибуты 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+')
}