Skip to content

[Bug]: loading Image's prop isn't getting passed to the native element #36635

Description

Component

Image

Package version

9.70.0

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Memory: 3.43 GB / 31.43 GB
  Browsers:
    Chrome: 151.0.7922.174
    Edge: Chromium (151.0.4129.107)
    Firefox: 154.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    @fluentui/react-components: ^9.54.5 => 9.70.0 
    @fluentui/react-datepicker-compat: ^0.6.22 => 0.6.22 
    @fluentui/react-icons: ^2.0.333 => 2.0.333 
    @fluentui/react-northstar: ^0.62.0 => 0.62.0 
    @types/react: ^18 => 18.3.28 
    @types/react-dom: ^18 => 18.3.7 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1

Current Behavior

loading attribute is not appearing on the native element despite being "available" in the component's interface.

Quick research (pls correct me if I'm wrong) leads to set of allowed img attributes, which for some reason doesn't contain "loading".

Expected Behavior

loading="lazy" appearing on native element(s). This attribute is widely supported and I believe there is no reason to deny it. In case there is, can you pls share why?

Reproduction

https://stackblitz.com/edit/iu8dqamb?file=src%2Fexample.tsx

Steps to reproduce

  1. Add loading="lazy" prop to the Image component
  2. Check native img element

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

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