5

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

尝试查看导入next/imageStorybook 的组件时出现错误：

TypeError: imageData is undefined

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

// .storybook/preview.js

import Image from 'next/image';

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

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

4

2 回答 2

8

我终于设法使它工作。

首先，我们需要使用默认设置定义一个环境变量以消除错误。我们可以通过插入 webpack 来做到这一点.storybook/main.js：

// .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为此使用了静态方法（链接到 MDN 文章），因为我不能只为Image.default.

于 2020-11-10T08:51:33.317 回答
3

作为已接受答案的补充：

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

于 2020-12-11T10:19:06.463 回答