Next12.2 future/image support

Describe the bug

Using the experimental “allowFutureImage” with storybook, it throw Error.

The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.

Your minimal, reproducible example

nextjs example with-storybook-app

Steps to reproduce

1. npx create-next-app --example with-storybook with-storybook-app
2. add experimental config

// next.config.js
module.exports = {
  ...
  experimental: {
    images: {
      allowFutureImage: true,
    },
  },
}

1. replace “next/image” to “next/future/image”

// pages/nextjsImages.js
import Image from 'next/future/image'

Expected behavior

with next.config.js setup, the stories including future/image should load without error.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• mac OS
• Chrome (102.0.5005.115)

storybook-addon-next version

1.6.7

Additional context

No response

[dawidk92]

Workaround 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, ...restProps } = props;

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

[Karibash]

I think this is the simplest solution.

import Image from 'next/future/image';

const OriginalImage = Image.default;
Object.defineProperty(Image, 'default', {
  configurable: true,
  value: props => <OriginalImage {...props} unoptimized />,
});