如何在Storybook中模拟NextJS next/efuture/image

Question

如何在Storybook中模拟NextJS中的下一个/未来/图像组件？

Answer 1

支持v12.2.4填充属性的Mock

// .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
}
/>
);
},
});