SVG图像标签在github readme上不使用

发布于 2025-01-26 20:06:18 字数 2542 浏览 3 评论 0原文

我用Golang Witch编写了SIPMPLE服务器，Witch应该返回带有来自stack-overflow的统计数据的SVG。只要它在浏览器或邮递员中测试我的服务器的响应，一切正常，但是当我尝试将此响应固定为GitHub readme.md我从堆栈提供的图像时API显示不正确。这是一个示例的样子：

通过浏览器：

，并在readme.md file上进行结果（此红行仅用于强调）

github是否会从其他来源阻止图像？在我的情况下，图像URL表明该照片托管在Facebook服务器上 href =“ https://graph.facebook.com/1432867793574670/picture？type = large 但是真的很重要吗？

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

链接到发生此问题的存储库： https://github.com/kubo550/ A>

这是我从服务器响应的确切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>

原文

I wrote sipmple server with golang witch should return a SVG with stats from stack-overflow. Everything works fine as long as it tests the response from my server in a browser or Postman, but when I try to pin this response as an image in the github README.md the image I provided from the Stack API does not display properly. This is a example how it's look like:

Via browser:

And result on README.md file (this red line is only for emphasize)

Does Github block images from other sources?
In my case the image URL indicates that the photo is hosted on a Facebook server
href="https://graph.facebook.com/1432867793574670/picture?type=large
But does it really matter?

Is there any way to get around this and display this image correctly? Maybe there is some svg image tag attribute that will help to fix this problem?

Link to the repository where this problem occurs: https://github.com/kubo550/stack-stats

This is the exact svg code i get in response from the server:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魂归处 2025-02-02 20:06:18

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数据一起使用：。这告诉您的浏览器，允许从哪些来源请求其他资源，而这些资源仅是嵌入式图像。

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

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

您需要将图像嵌入到SVG中，而不是引用外部URL。

GitHub serves your SVG through its own domain camo.githubusercontent.com and does not directly refer to your image.

<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 gets served with the content-security-policy img-src data:. This tells your browser from which sources it is allowed to request additional resources, which are only inlined images.

When opening your image in the browser, it gives this error in the console:

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:".

You need to inline the image into the svg instead of referencing an external url.

回复收藏 0 原文

~没有更多了~