SVG 图像标签不适用于 github 自述文件

Question

我用 golang 编写了一个简单的服务器，应该 return 一个带有堆栈溢出统计信息的 SVG。只要它在浏览器或 Postman 中测试来自我的服务器的响应，一切正常，但是当我尝试将此响应作为图像固定在 github README.md 中时，我从 Stack API 显示不正确。这是一个示例：

通过浏览器：

结果在README.md文件中（这条红线只是为了强调）

Github 会屏蔽其他来源的图片吗？在我的例子中，图像 URL 表示照片托管在 Facebook 服务器上 href="https://graph.facebook.com/1432867793574670/picture?type=large 但这真的重要吗？

有什么方法可以解决这个问题并正确显示此图像吗？也许有一些 svg 图像标签属性可以帮助解决这个问题？

Link 到出现这个问题的仓库：https://github.com/kubo550/stack-stats

这是我从服务器响应中得到的确切 svg 代码：

<svg data-testUserId="14513625" width="158" height="47" viewBox="0 0 158 47" fill="none"
     xmlns="http://www.w3.org/2000/svg">
    <rect width="158" height="47" fill="#2D2D2D"/>

        <!-- this is the problematic line -->
    <image x="16" y="10" href="https://graph.facebook.com/1432867793574670/picture?type=large" height="24" width="24"/>
    
    <text x="64" y="23" font-weight="bold" fill="#C4CCBC" font-family="Arial" font-size="12"
          text-anchor="middle" dominant-baseline="middle">1,707
    </text>
    <circle text-anchor="middle" dominant-baseline="middle" cx="90" cy="23" r="3" fill="#F0B400"/>
    <text x="100" y="23" font-size="12" font-family="Arial" font-weight="bold"
          text-anchor="middle" dominant-baseline="middle" fill="#F0B400">1
    </text>
    <circle text-anchor="middle" dominant-baseline="middle" cx="112" cy="23" r="3" fill="#999C9F"/>
    <text x="122" y="23" font-size="12" font-family="Arial" font-weight="bold"
          text-anchor="middle" dominant-baseline="middle" fill="#999C9F">7
    </text>
    <circle text-anchor="middle" dominant-baseline="middle" cx="134" cy="23" r="3" fill="#AB8A5F"/>
    <text x="146" y="23" font-size="12" font-family="Arial" font-weight="bold"
          text-anchor="middle" dominant-baseline="middle" fill="#AB8A5F">11
    </text>
</svg>

Answer 1

GitHub 通过其自己的域 camo.githubusercontent.com 提供您的 SVG，并且不直接引用您的图像。

<img src="https://camo.githubusercontent.com/f9e51abbda49dfb31243a3642e1f4a2f7b31371cf61e23c103c584c189a0791f/68747470733a2f2f737461636b2d73746174732e6865726f6b756170702e636f6d2f73746174733f69643d3134353133363235" alt="stack stats" data-canonical-src="https://stack-stats.herokuapp.com/stats?id=14513625" style="max-width: 100%;">

camo.githubusercontent.com 与 content-security-policy img-src data: 一起提供。这会告诉您的浏览器允许从哪些来源请求其他资源，这些资源只是内联图像。

在浏览器中打开图像时，在控制台中出现此错误：

Refused to load the image 'https://graph.facebook.com/1432867793574670/picture?type=large' because it violates the following Content Security Policy directive: "img-src data:".

您需要将图像内嵌到 svg 中，而不是引用外部 url。

SVG 图像标签不适用于 github 自述文件

SVG image tag doesn't work on github README

image

github

svg

readme

stackexchange