How to disabled lazy loading for only storybook (or if possible only for Chromatic)

Question

In my React application I am using storybook and for this I have integrated chromatic where all my images are published and stored.

But for specific stories my images are missing when build pushed to Chromatic (see screenshot below for missing image):

You can see above missing images in chromatic build.

I can disabled lazy=loading in my specific component: My component code below:

<div className="flex-grow px-6 place-self-center">
          <div className="h-60 ">
            <img
              src={imageUrl}
              className="px-6 pt-4 pb-10 my-0"
              height={imageHeight}
              loading="lazy" // here I can remove this line
            />
          </div>

But I want to disabled lazy loading only for storybook/stories or better for Chromatic only.

Answer 1

You can ignore specific DOM elements by a adding a special class name or a data attribute to the target. This could be combined with a check using isChromatic to determine if you're in the Chromatic environment or a regular storybook.

// class name
<img 
  src={imageUrl}
  className="chromatic-ignore"
  ...
/>

// data attribute
<img 
  src={imageUrl}
  data-chromatic="ignore"
  ...
/>

That being said, you could also change the threshold for Chromatic changes to allow some visual noise when comparing the snapshots:

// story parameters
parameters: {
  chromatic: { diffThreshold: 0.2 },
},