Static badge with data url logo doesn't work on GitHub if set as `srcset` attribute of `<source>` tag
rindeal opened this issue Β· comments
Are you experiencing an issue with...
shields.io
π Description
Setting static badge inside srcset
of <source>
doesn't work:
If set as src
in <img>
, it does work:
Screenshot:
π Link to the badge
π‘ Possible Solution
No response
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
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.
Thanks, I've created a ticket with GitHub. We shall see.
GitHub support guy confirmed it and sent it to engineering.
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.
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"