Static badge with data url logo doesn't work on GitHub if set as `srcset` attribute of `<source>` tag about shields HOT 6 CLOSED

Badge tested using npm run badge https://img.shields.io/badge/Open%20Hub-white.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOSAxMyI+PHRleHQgeT0iMTIiIGZpbGw9IiM1YTJhODEiIGZvbnQtZmFtaWx5PSJOaW1idXMgU2FucyBOYXJyb3ciIGZvbnQtd2VpZ2h0PSI4MDAiPk9IPC90ZXh0Pjwvc3ZnPg==
Output is available here

from shields.

This is true in a GitHub issue, but if you put

<picture>
  <source srcset="https://img.shields.io/badge/Open%20Hub-white.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOSAxMyI+PHRleHQgeT0iMTIiIGZpbGw9IiM1YTJhODEiIGZvbnQtZmFtaWx5PSJOaW1idXMgU2FucyBOYXJyb3ciIGZvbnQtd2VpZ2h0PSI4MDAiPk9IPC90ZXh0Pjwvc3ZnPg==" />
  <img />
</picture>

in a HTML file it works as expected.

If you look at what GitHub is actually rendering in those two cases, it is

<source srcset="..." data-canonical-src="https://img.shields.io/badge/Open%20Hub-white.svg?logo=data:image/svg%2bxml;base64">

and

<img src="..." data-canonical-src="https://img.shields.io/badge/Open%20Hub-white.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOSAxMyI+PHRleHQgeT0iMTIiIGZpbGw9IiM1YTJhODEiIGZvbnQtZmFtaWx5PSJOaW1idXMgU2FucyBOYXJyb3ciIGZvbnQtd2VpZ2h0PSI4MDAiPk9IPC90ZXh0Pjwvc3ZnPg==">

so there is something stripping the part after the comma in the first case, but it is not us.

This isn't something we can do anything about.

from shields.

Thanks, I've created a ticket with GitHub. We shall see.

from shields.

GitHub support guy confirmed it and sent it to engineering.

from shields.

OK. Cheers for following up. If it has been acknowledged as a problem on GitHub's side, I think we can close this one here.

from shields.

Yep, and for posterity, here's a minimal PoC:

❯ echo '<picture><img src="Foo,Bar" /></picture>' | curl -s -L -X POST --data-binary @- --header "Content-Type:text/x-markdown" https://api.github.com/markdown/raw | grep -o 'src="[^"]*"'

src="Foo,Bar"

❯ echo '<picture><source srcset="Foo,Bar"> /><img /></picture>' | curl -s -L -X POST --data-binary @- --header "Content-Type:text/x-markdown" https://api.github.com/markdown/raw | grep -o 'srcset="[^"]*"'

srcset="Foo"

from shields.