javascript - 如何在 Storybook 中模拟 Next.js Image 组件？

Question

Next.js 引入了一个新的 Image v10 中的组件应该是 <img> 的替代品标签。
尝试查看导入 next/image 的组件时出错进入故事书:TypeError: imageData is undefined我一直试图覆盖 preview.js 中的图像对象(我用于 next/router 的一种技术，如文档所述 here )但我得到了同样的错误:

// .storybook/preview.js

import Image from 'next/image';

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

知道如何覆盖 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;
  },
};

现在我们可以覆盖 next/image 的默认导出带有返回简单 <img/> 的功能组件的包标签。

// .storybook/preview.js

import * as nextImage from 'next/image';

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

我正在使用 defineProperty静态方法( link to MDN article )，因为我不能只为 Image.default 分配一个新值.