What is the best way to have a fallback image in NextJS?

by

You can create a custom image component that extends the built-in next/image and adds the fallback logic if the image fails to load by triggering the onError callback.

import React, { useState } from 'react';
import Image from 'next/image';

const ImageWithFallback = (props) => {
    const { src, fallbackSrc, ...rest } = props;
    const [imgSrc, setImgSrc] = useState(src);

    return (
        <Image
            {...rest}
            src={imgSrc}
            onError={() => {
                setImgSrc(fallbackSrc);
            }}
        />
    );
};

export default ImageWithFallback;

Then, you can directly use the custom component instead of next/image as follows:

<ImageWithFallback
    key={videoId}
    layout="fill"
    src={`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`}
    fallbackSrc={`https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`}
/>

Passing a key prop to trigger a re-render on videoId change.

More Related Contents:

  1. Window is not defined in Next.js React app
  2. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  3. Can’t build React/Next project – found page without a React Component as default export (context api file)
  4. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  5. First Load JS shared by all is rather heavy in next.js
  6. Warning: Function components cannot be given refs
  7. Error: How to serialize data from getStaticProps : Next.js
  8. Environment variables not working (Next.JS 9.4.4)
  9. Next.js context provider wrapping App component with page specific layout component giving undefined data
  10. I can’t reference an image in Next.js
  11. unable to deploy next js to azure
  12. How to Set port in next.js
  13. Next.js: Error: React.Children.only expected to receive a single React element child
  14. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  15. how to add domains to next.config.js for “next/image” while using a plugin
  16. how can I use top level “await” in typescript next.js
  17. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  18. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  19. How to prevent Next.js from instantiating a singleton class/object multiple times?
  20. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  21. How to avoid caching in the app directory of Next.js?
  22. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined
  23. Want to have an event handler for the browser’s back button with next.js
  24. Next.js, getStaticProps not working with component but does with page
  25. How to load image files with webpack file-loader
  26. javascript change background color on click [closed]
  27. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  28. What is Virtual DOM?
  29. Bootstrap modal in React.js
  30. UseEffect being called multiple times

Leave a Comment