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.

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

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
area: next/image Image optmization (next/image, next/legacy/image) kind: bug Confirmed bug that is on the backlog

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 template: bug A user has filled out the bug report template. Issue needs triaging 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 added a commit to SukkaW/next.js that referenced this issue Aug 23, 2022
@styfle styfle added kind: bug Confirmed bug that is on the backlog area: next/image Image optmization (next/image, next/legacy/image) and removed template: bug A user has filled out the bug report template. Issue needs triaging labels Aug 23, 2022
ijjk pushed a commit that referenced this issue Aug 23, 2022
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

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.
Labels
area: next/image Image optmization (next/image, next/legacy/image) kind: bug Confirmed bug that is on the backlog
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants