SVG 图像标签在 github README 上不起作用

Question

我编写了简单的服务器，其中golang女巫应该返回一个包含堆栈溢出统计信息的 SVG。只要它在浏览器或 Postman 中测试来自我的服务器的响应，一切都会正常工作，但是当我尝试将此响应固定为 github 中的图像时，README.md我从 Stack API 提供的图像无法正确显示。这是一个示例：

通过浏览器：

并将结果README.md存档（此红线仅用于强调）

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

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

链接到发生此问题的存储库：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 通过自己的域为您的 SVG 提供服务camo.githubusercontent.com，并且不直接引用您的图像。

<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:。这告诉您的浏览器允许从哪些来源请求额外资源，这些资源只是内联图像。

在浏览器中打开图像时，它会在控制台中出现以下错误：

拒绝加载图像“https://graph.facebook.com/1432867793574670/picture?type=large”，因为它违反了以下内容安全策略指令：“img-src data:”。

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