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

Could not use next/future/image with imported image and fill layout #39807

Closed
1 task done
armandabric opened this issue Aug 22, 2022 · 2 comments · Fixed by #39849
Closed
1 task done

Could not use next/future/image with imported image and fill layout #39807

armandabric opened this issue Aug 22, 2022 · 2 comments · Fixed by #39849
Labels
Image (next/image) Related to Next.js Image Optimization.

Comments

@armandabric
Copy link
Contributor

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Mon Aug 22 2022 11:46:31 GMT+0200 (Central European Summer Time)
Binaries:
  Node: 16.14.2
  npm: 7.17.0
  Yarn: 1.22.10
  pnpm: 7.9.4-0
Relevant packages:
  next: 12.2.6-canary.1
  eslint-config-next: N/A
  react: 17.0.1
  react-dom: 17.0.1

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using an imported image and the fill layout with the new image component it throw an error:

Error: Image with src "/_next/static/media/bar.ddd5bcf8.svg" has both "width" and "fill" properties. Only one should be used.

Expected Behavior

The doc seems to allow this use case. So we should be able to use the fill layout with an imported image.

Link to reproduction

https://stackblitz.com/edit/nextjs-future-image-fill-bug?file=pages/index.js

To Reproduce

Open the sand box
@armandabric armandabric added the bug Issue was opened via the bug report template. label Aug 22, 2022
@SukkaW
Copy link
Contributor

SukkaW commented Aug 23, 2022

I have identified the issue. The static imported image will always have width and height values (provided by the Webpack) that Next.js doesn't expect to have when using fill.

I am already working on a fix to let Next.js ignore width and height from the Webpack when using fill.

SukkaW added a commit to SukkaW/next.js that referenced this issue Aug 23, 2022
@SukkaW
test(vercel#39807): add a failed test case
77cca28
SukkaW added a commit to SukkaW/next.js that referenced this issue Aug 23, 2022
@SukkaW
fix(vercel#39807): ignore width/height from webpack with "fill"
9d9ab2f
@SukkaW SukkaW mentioned this issue Aug 23, 2022
Merged
3 tasks
@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 Aug 23, 2022
ijjk pushed a commit that referenced this issue Aug 23, 2022
@SukkaW
fix(#39807): ignore width/height from webpack with "fill" (#39849)
8dfab19 
Fixes #39807.

When statically importing an image, the `width` and `height` will always be provided alongside the `src` by the Webpack. `next/image` will ignore `width` and `height` come from Webpack when `layout === 'fill'`, while `next/future/image` will not, hence the issue. The PR fixes that. The corresponding integration test cases are also added.

cc @styfle 

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
@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 Sep 23, 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(#39807): ignore width/height from webpack with "fill" SukkaW/next.js
3 participants
@armandabric @styfle @SukkaW