Can a placeholder be created for Next.js Image without using blur effect?

Question

Can a placeholder be created for Next.js Image without using blur effect?

Currently, I am utilizing Next.js in my projects. The Next.js Image component includes placeholder and blurDataURL attributes which work seamlessly together. However, when attempting to incorporate a custom SVG placeholder (converted to base64) the result is blurred.

I have made numerous attempts to locate information on how to disable the blur effect without success. If anyone has any insights or suggestions, it would be greatly appreciated! Thank you in advance!

javascript image next.js next-images

Answer 1

Answer №1

Here is how I implement a placeholder for loading images in my code snippet

'using 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;

Answer 2

Here is how I implement a placeholder for loading images in my code snippet

'using 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;

Can a placeholder be created for Next.js Image without using blur effect?

Answer №1

Similar questions

Python's Selenium execute script does not support setTimeout function

Is there a way for me to import a variable from one file and use require() to access it in another file?

Steps to make the placeholder in an MUI TextField component move to the top of the box instead of staying within the border:

What is preventing MenuItemLink from being displayed in the menu?

ffmpeg is successfully converting less than half of my images into a video

How can we effectively use mongoose populate in our codebase?

Typescript is outputting the error message: "cannot be assigned to the type 'IntrinsicAttributes & { children?: ReactNode; }'"

An internal server error has occurred within the asp.net framework, resulting in

Discover the DOM events present in an HTML response

Setting up the customized filename for precompiled Handlebars templates

Is it possible to prevent the fade out of the image when hovering over the text after hovering over the div or image, causing the text to fade in?

How can one retrieve the set-cookie value in a <meta http-equiv> tag using Node.js?

What is the best way to eliminate excess space on the right side in Bootstrap 4 while in mobile view?

Looking to pass the `Item Index` to functions within v-list-item-action in Vuetify?

Error: File or directory not found, unable to locate BUILD_ID

"Encountered a type error with the authorization from the credentials provider

Switch up the image URL with a click of a button

3.2+ Moodle communication and connections

"Error encountered: 'require' is not defined in the bundled JS file for

Changing the value in sessionStorage does not trigger the onChange event (Next.js)