如何在 Storybook 中模拟 Next.js 图片组件？

Question

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

我在尝试查看将 next/image 导入 Storybook 的组件时遇到错误：

TypeError: imageData is undefined

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

// .storybook/preview.js

import Image from 'next/image';

Image = ({ src }) => <img src={src} />;

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

Answer 1

我终于成功了。

首先我们需要定义一个具有默认设置的环境变量来消除错误。我们可以通过在 .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;
  },
};

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

// .storybook/preview.js

import * as nextImage from 'next/image';

Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: (props) => {
    return <img {...props} />;
  },
});

我正在为此 (link to MDN article) 使用 defineProperty 静态方法，因为我不能只为 Image.default.

分配一个新值

Answer 2

作为已接受答案的补充：

在main.js

内添加var webpack = require('webpack');

如何在 Storybook 中模拟 Next.js 图片组件？

How to mock Next.js Image component in Storybook?

javascript

reactjs

next.js

storybook

nextjs-image