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.

[samcx]

@qkrwogns9703 Is there a reason why the is using next/dynamic?

[qkrwogns9703]

@samcx Hello, there is no specific reason why next/dynamic should be used in this part. After running a few tests, the code wasn't cleaned up properly. I apologize for that. I've made the necessary changes in the CodesSandbox.

[samcx]

@qkrwogns9703 Sorry for the late response!

Can you clarify how it is behaving unexpectedly?

[qkrwogns9703]

@samcx Hello, Thank you for your comment!
The issue I encountered was that I expected the placeholder to be filled based on the parent element, but it behaved differently than I anticipated.
The backgroundSize property does not support objectFit: 'fill'. However, when using the component and setting style={{ objectFit: "fill" }}, it applies objectFit: "fill" as a backgroundSize property, which I believe causes unexpected behavior.
So, I considered using the cover property instead when writing code that is not supported by the backgroundSize property.

[samcx]

@qkrwogns9703 I added a comment to your PR! → #67482 (comment)

[qkrwogns9703]

@samcx Thank you for your comment! I have updated the changes in the Pull Request.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.