When using a placeholder in the Image component, there is an issue where the objectFit property may conflict with the backgroundSize property.

[qkrwogns9703]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/next-image-placeholder-kd57qw?file=%2Fapp%2FImageTest.tsx%3A12%2C16

To Reproduce

The issue can be reproduced by using the fill attribute in the Image component, setting style={{objectFit: 'fill'}}, and adding a data image URL to the placeholder props. This occurs when the placeholder's backgroundSize CSS property cannot use the objectFit property.

Current vs. Expected behavior

It might be perceived as not a bug, but since there can be situations where an invalid value is used for backgroundSize, I think we could perform a stricter type check.

packages/next/src/shared/lib/get-img-props.ts

When an objectFit property that cannot be used for backgroundSize is applied, I experienced an issue where the placeholder's size behaved unexpectedly. Please refer to the codesandbox link.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.10
  pnpm: 8.9.2
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

No response

[hautest]

I am also experiencing this problem, and it needs to be fixed.