Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Base64 encoded images with 'fill' are always triggering 'missing sizes' warning #42006

Closed
1 task done
menberg opened this issue Oct 27, 2022 · 2 comments · Fixed by #42030
Closed
1 task done

Base64 encoded images with 'fill' are always triggering 'missing sizes' warning #42006

menberg opened this issue Oct 27, 2022 · 2 comments · Fixed by #42030
Labels
Image (next/image) Related to Next.js Image Optimization.

Comments

@menberg
Copy link

menberg commented Oct 27, 2022 •
edited

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.10.0
      npm: 8.19.2
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

irrelevant

How are you deploying your application? (if relevant)

irrelevant

Describe the Bug

When using the 'fill' prop in the Next.js image component on a Base64 encoded image, the following warning in the console from this code line will always be logged, even if there IS indeed a "sizes" prop:

Image with src "data:image/..." has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more: https://nextjs.org/docs/api-reference/next/image#sizes

According to this code line in the Next.js image component source code, the 'unoptimized' flag will be set on all Base64 encoded images. And because of this code line, all sizes attributes will be removed on unoptimized images. Thus, there is no way to avoid the triggering of the quoted console warning when using a Base64 encoded image with 'fill' – even if there is a sizes attribute given.

Expected Behavior

The warning should not be triggered on Base64 encoded images with 'fill' and 'sizes' attributes.

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-mjmfqs?file=pages/index.tsx

To Reproduce

Open reproduction example and check browser console messages. The printed warning message implies that no sizes prop is set, which is not true.
@menberg menberg added the bug Issue was opened via the bug report template. label Oct 27, 2022
teobler added a commit to teobler/next.js that referenced this issue Oct 28, 2022
@teobler
fix: if an image is unoptimized, should not warning for required size…
9e3b23f 
…s when using fill prop(vercel#42006).
teobler added a commit to teobler/next.js that referenced this issue Oct 28, 2022
@teobler
fix: if an image is unoptimized, should not warning for required size…
7b0b300 
…s when using fill prop(vercel#42006).
teobler added a commit to teobler/next.js that referenced this issue Oct 28, 2022
@teobler
fix: if an image is unoptimized, should not warning for required size…
b37c6c4 
…s when using fill prop(vercel#42006).
@teobler teobler mentioned this issue Oct 28, 2022
Merged
4 tasks
teobler added a commit to teobler/next.js that referenced this issue Oct 28, 2022
@teobler
fix: fix lint issue(vercel#42006).
62dd68c
@styfle styfle added kind: bug Image (next/image) Related to Next.js Image Optimization. and removed bug Issue was opened via the bug report template. labels Oct 28, 2022
@styfle
Copy link
Member

styfle commented Oct 28, 2022

Thanks for reporting this bug! It will be fixed in PR #42030

styfle added a commit that referenced this issue Oct 28, 2022
@teobler @styfle
fix: Data URL images with 'fill' are always triggering 'missing sizes…
e2e1048 
…' warning (#42030)

fixes #42006

this issue occurred because images with `data url` src start with `blob`
and `data` will be mark as `unoptimized`, then its `sizes` will be
assigned with `undefined`.

I just skip the check for `data url` images, if there is any better
solution, we can have a discuss here.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added

- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: Steven <steven@ceriously.com>
@github-actions
Copy link
Contributor

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

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Image (next/image) Related to Next.js Image Optimization.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Data URL images with 'fill' are always triggering 'missing sizes' warning teobler/next.js
2 participants
@styfle @menberg