react-imgix icon indicating copy to clipboard operation
react-imgix copied to clipboard

HTML Validation: The width/height properties get rendered to HTML <source> element

Open val3ntin opened this issue 3 years ago • 0 comments

hi, in this section you refer to the HTML Picture tag support: https://github.com/imgix/react-imgix#picture-support

However, if you use this element, the rendered HTML contains widht/height properties when you specify the width/height once Source element is used:

<Picture>
      <Source
        width={400}
        htmlAttributes={{ media: "(min-width: 768px)" }}
        src={src}
      />
      <Source
        width={200}
        htmlAttributes={{ media: "(min-width: 320px)" }}
        src={src}
      />
      <Imgix src={src} width={100} />
    </Picture>

the width/height are get rendered into HTML source tag, that's causing an invalid HTML validation:

<source media="(min-width: 768px)" width="400" srcset="...."

Root cause: https://github.com/imgix/react-imgix/blob/9337dfb15c9290613e02fdac651f334bf029e064/src/react-imgix.jsx#L373-L374

val3ntin avatar Mar 31 '22 07:03 val3ntin