Static badge with data url logo doesn't work on GitHub if set as srcset attribute of <source> tag

[rindeal]

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

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

💡 Possible Solution

No response

[github-actions]

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

[chris48s]

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.

[rindeal]

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

[rindeal]

GitHub support guy confirmed it and sent it to engineering.

[chris48s]

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.

[rindeal]

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"