How to mock NextJS next/future/image in Storybook

Question

How can I mock next/future/image component from NextJS in Storybook?

Answer 1

Mock with support of fill property from v12.2.4

// .storybook/preview.js

import * as NextFutureImage from "next/future/image";

Object.defineProperty(NextFutureImage, "default", {
  configurable: true,
  value: (props) => {
    const { fill, style, ...restProps } = props;

    return (
      <img
        {...restProps}
        style={
          fill
            ? {
                position: "absolute",
                height: "100%",
                width: "100%",
                inset: 0,
                ...style
              }
            : style
        }
      />
    );
  },
});