Skip to content

[Bug]: Storybook doesn’t apply global next/image props #32256

@y-hsgw

Description

@y-hsgw

Describe the bug

Per the official docs, framework options allow passing props to every instance of next/image via framework.options.image.
Setting loading: "eager" there does not take effect; images still render with loading="lazy".

Config:

framework: {
  name: '@storybook/nextjs',
  options: {
    image: {
      loading: 'eager',
    },
  },
},

Reproduction link

https://stackblitz.com/edit/github-o25x4kyy?file=package.json

Reproduction steps

  1. Start Storybook.
  2. Inspect an image rendered with next/image in DevTools.
  3. Observe that the loading attribute is still "lazy".
Image

System

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^9.1.0-alpha.3 => 9.1.2 
    @storybook/addon-onboarding: ^9.1.0-alpha.3 => 9.1.2 
    @storybook/nextjs: ^9.1.0-alpha.3 => 9.1.2 
    storybook: ^9.1.0-alpha.3 => 9.1.2

Additional context

similar issue: #22895

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions