如何模拟Storybook中的Next.js图像组件

Question

Next.js在v10中引入了一个新的Image组件，该组件应该是<img>标签的替代品。

我在尝试查看将next/image导入Storybook:的组件时出错

TypeError: imageData is undefined

我一直试图覆盖preview.js中的图像对象(我在next/router中使用的一种技术，如本文所述(，但我得到了相同的错误：

// .storybook/preview.js
import Image from 'next/image';
Image = ({ src }) => <img src={src} />;

知道我如何在Storybook中覆盖next/image包的行为吗？

Answer 1

我终于设法让它工作起来了。

首先，我们需要定义一个具有默认设置的env变量来消除错误。我们可以通过在.storybook/main.js:中插入webpack来做到这一点

// .storybook/main.js
var webpack = require('webpack');
module.exports = {
...
webpackFinal: (config) => {
config.plugins.push(new webpack.DefinePlugin({
'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
domains: [],
path: '/',
loader: 'default',
}),
}));
return config;
},
};

现在，我们可以用一个返回简单<img/>标记的功能组件覆盖next/image包的默认导出。

// .storybook/preview.js
import * as nextImage from 'next/image';
Object.defineProperty(nextImage, 'default', {
configurable: true,
value: (props) => {
return <img {...props} />;
},
});

我使用defineProperty静态方法(链接到MDN文章(，因为我不能只为Image.default分配一个新值。

Answer 2

作为已接受答案的补充：

在main.js 中添加var webpack = require('webpack');