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

next/image produces invalid HTML according to W3C #18850

Closed
dmaksymec opened this issue Nov 5, 2020 · 1 comment · Fixed by #18903
Closed

next/image produces invalid HTML according to W3C #18850

dmaksymec opened this issue Nov 5, 2020 · 1 comment · Fixed by #18903
Assignees
@styfle
Milestone
iteration 12

Comments

@dmaksymec
Copy link

dmaksymec commented Nov 5, 2020 •
edited
Loading

Bug report

Describe the bug

After implementing on our website, we noticed that our pages were now reporting invalid HTML errors on the W3C Markup Validation Service.

Error: Bad value data:image/svg+xml;charset=utf-8, for attribute src on element img: Illegal character in scheme data: < is not allowed.

Error: Element img is missing required attribute src.

To Reproduce

Create a blank page using next/image component and check it on the W3C Validator.

https://validator.w3.org/

Expected behavior

No Errors.

Screenshots

next-image-validation-error

System information

N/A

Additional context

Great work! If we can resolve this, it will be one of my favorite components!
@dmaksymec dmaksymec added the bug Issue was opened via the bug report template. label Nov 5, 2020
@dmaksymec dmaksymec changed the title next/image produces invalid HTML according to WC3 next/image produces invalid HTML according to W3C Nov 5, 2020
@Timer Timer added kind: bug and removed bug Issue was opened via the bug report template. labels Nov 5, 2020
@Timer Timer modified the milestone: 10.x.x Nov 5, 2020
@styfle styfle mentioned this issue Nov 5, 2020
Merged
@styfle styfle self-assigned this Nov 5, 2020
@styfle styfle added the point: 2 label Nov 5, 2020
@styfle styfle mentioned this issue Nov 6, 2020
Merged
@styfle styfle added this to the iteration 12 milestone Nov 6, 2020
@styfle styfle added point: 3 and removed point: 2 labels Nov 6, 2020
@kodiakhq kodiakhq bot closed this as completed in #18903 Nov 7, 2020
kodiakhq bot pushed a commit that referenced this issue Nov 7, 2020
@styfle
Fix html validation for Image component (#18903)
b2a8a2f 
This PR fixes two bugs causing HTML validators to complain.

- Error: Bad value data:image/svg+xml;charset=utf-8, for attribute src on element img: Illegal character in scheme data: < is not allowed.
  - Fixed by using base64 for svg during `layout=intrinsic` to avoid angle brackets
- Error: Element img is missing required attribute src.
  - Fixed by using base64 transparent gif for `loading=lazy` placeholder

Fixes #18850
@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@styfle styfle

Labels
None yet
Projects
None yet
Milestone
iteration 12
Development

Successfully merging a pull request may close this issue.

Fix html validation for Image component vercel/next.js
4 participants
@styfle @Timer @balazsorban44 @dmaksymec