Add lint rule to ensure <img> is self closing

[khiga8]

When <img> is does not have self closing slash like <img />, vercel deploys broke completely.

<img > is considered valid HTML as it is a void element, but for some reason <img > breaks vercel deploys.

Apparently <img> is not valid in XHTML or XML and needs to be <img /> so maybe XHTML or XML is being used under the hood somewhere? Not sure

We should investigate why this breaks and/or add a lint rule so we catch this at the linting stage and prevent future headaches.

[yaili]

@khiga8 does this happen in the design docs only, or across all primer.style docs?

[khiga8]

This was specifically observed in this design repo in a .mdx file. Here's a related commit that fixed it.

[koddsson]

JSX isn't HTML and has its own semantics. One of the ways it differs from HTML is that all elements need to close, either by self-closing or with a closing element.

<img> is invalid in JSX but is how we define images in HTML.