是否可以制作没有模糊的 Next.js 图像占位符？

Question

我在我的项目中使用 Next.js。 Next.js 图像组件具有占位符和模糊DataURL 属性，这种组合效果非常好，但如果我想从 SVG 添加自定义占位符（SVG->base64），我会得到模糊的结果。

我所有寻找禁用模糊效果信息的尝试都失败了......有人可以帮助我吗？预先感谢！

Answer 1

这就是我在加载图像时使用占位符的方式

'use client'

import { useCallback, useMemo, useState } from 'react';
import Image, { ImageProps } from 'next/image';

import loadingPlaceholder from '@/assets/images/loading-placeholder.svg';
import errorPlaceholder from '@/assets/images/error-placeholder.svg';

const ImageWithPlaceHolder = ({ src, alt, ...otherProps }: ImageProps) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  const startLoading = useCallback(() => setLoading(true), []);
  const completeLoading = useCallback(() => setLoading(false), []);

  const errorHandler = useCallback(() => setError(true), []);

  const internalSrc = useMemo(
    () => (error ? errorPlaceholder : loading ? loadingPlaceholder : src),
    [error, loading, src],
  );

  return (
    <Image
      src={internalSrc}
      alt={alt}
      {...otherProps}
      onError={errorHandler}
      onLoadStart={startLoading}
      onLoadingComplete={completeLoading}
    />
  );
};

export default ImageWithPlaceHolder;