如何在Storybook中模拟NextJS的next/future/image组件

1. 编写模拟组件 #

在项目中创建一个模拟组件文件（比如src/components/mocks/MockNextFutureImage.tsx），实现与next/future/image一致的核心props，用普通<img>标签替代Next.js的环境依赖逻辑：

import React from 'react';

interface MockNextFutureImageProps {
  src: string;
  alt: string;
  width?: number | string;
  height?: number | string;
  className?: string;
  // 按需添加其他需要的props
}

const MockNextFutureImage: React.FC<MockNextFutureImageProps> = ({
  src,
  alt,
  width,
  height,
  className,
}) => {
  return (
    <img
      src={src}
      alt={alt}
      style={{ width, height, objectFit: 'cover' }}
      className={className}
    />
  );
};

export default MockNextFutureImage;

2. 配置Storybook的Webpack别名 #

修改.storybook/main.js，添加Webpack别名规则，将next/future/image指向你写的模拟组件：

module.exports = {
  // 其他Storybook配置
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'next/future/image': require.resolve('../src/components/mocks/MockNextFutureImage.tsx'),
    };
    return config;
  },
};

3. 处理图片资源加载 #

确保Storybook能正确解析图片资源，可通过storybook-addon-next-images插件实现：

• 安装插件：npm install storybook-addon-next-images --save-dev
• 在.storybook/main.js的addons数组中添加：

addons: [
  // 其他addons
  'storybook-addon-next-images',
],

也可以手动配置Webpack的file-loader/url-loader来处理图片格式。

4. 在Stories中正常使用 #

现在可以在stories文件中直接导入next/future/image，Webpack会自动替换为模拟组件，写法和Next.js项目中一致：

import Image from 'next/future/image';
import MyComponent from '../MyComponent';

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
};

export const Default = () => (
  <MyComponent>
    <Image src="/example.jpg" alt="示例图片" width={300} height={200} />
  </MyComponent>
);

内容的提问来源于stack exchange，提问作者Dawid Krajewski