如何仅为Storybook或Chromatic禁用图片懒加载？

核心原因 #

Chromatic的截图渲染流程会快速捕获组件状态，而loading="lazy"会延迟图片加载，导致截图时图片还未完成加载，最终显示缺失。

解决方案：根据环境动态控制懒加载属性 #

你可以通过检测Storybook或Chromatic的环境变量，在对应环境下自动禁用懒加载，无需手动修改组件代码。

方法1：组件内直接判断环境变量

Storybook和Chromatic会自动注入专属环境变量，你可以在组件里直接读取这些变量来决定是否启用懒加载：

import React from 'react';

const YourImageComponent = ({ src, alt }) => {
  // 检测是否处于Storybook或Chromatic环境
  const isTargetEnv = process.env.STORYBOOK || process.env.CHROMATIC;
  // 仅在非目标环境启用懒加载
  const loadingAttr = isTargetEnv ? undefined : 'lazy';

  return <img src={src} alt={alt} loading={loadingAttr} />;
};

export default YourImageComponent;

方法2：全局统一配置（适合多组件场景）

如果多个组件都有这个问题，可以在Storybook的全局配置里设置参数，再在组件中读取：

1. 在.storybook/preview.js中添加全局参数：

export const parameters = {
  // 标记当前是否为Chromatic环境
  isChromatic: process.env.CHROMATIC === 'true',
};

2. 在组件中通过Storybook API读取参数：

import React from 'react';
import { useParameter } from '@storybook/api';

const YourImageComponent = ({ src, alt }) => {
  const isChromatic = useParameter('isChromatic', false);
  const isStorybook = !!process.env.STORYBOOK;
  const loadingAttr = (isStorybook || isChromatic) ? undefined : 'lazy';

  return <img src={src} alt={alt} loading={loadingAttr} />;
};

export default YourImageComponent;

方法3：CI构建时注入自定义环境变量

如果是在CI流程中运行Chromatic，可以通过命令行注入自定义变量来控制：

# 运行Chromatic时注入禁用懒加载的变量
CHROMATIC_DISABLE_LAZY=true npx chromatic

然后组件里判断这个变量：

const isDisableLazy = process.env.CHROMATIC_DISABLE_LAZY === 'true';
const loadingAttr = isDisableLazy ? undefined : 'lazy';

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