Skip to content

Attributes (href, imagesrcset) not properly encoded in link preload tags (leading to unrecognized-char-ref errors in Nuxt Hints) #2178

@codeflorist

Description

@codeflorist

Consider this usage of NuxtImg:

<NuxtImg
  src="/my-image.png"
  :modifiers="{ w: 200, q: 10 }"
  preload
/>

This results in the following link tag in the html head:

<link
  rel="preload"
  as="image"
  href="/_ipx/w_200&q_10/coopsman.png"
  imagesrcset="/_ipx/w_200&q_10/coopsman.png 1x, /_ipx/w_200&q_10/coopsman.png 2x"
/>

The ampersand in the URLs should be encoded as &amp; and Nuxt Hints (via the html-validate package) lists this as an error:
hints:htmlValidate:warn [html-validate] unrecognized-char-ref at inline:39:24 - Unrecognized character reference "&q"

Reproduction:
https://stackblitz.com/edit/nuxt-starter-vpusa6kt?file=app.vue

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions