我用女巫寫了一個簡單的服務器,golang應該從堆疊溢位回傳一個帶有統計資訊的 SVG。只要它在瀏覽器或 Postman 中測驗來自我的服務器的回應,一切正常,但是當我嘗試將此回應作為影像固定在 githubREADME.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>
uj5u.com熱心網友回復:
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 資料:”。
您需要將影像行內到 svg 而不是參考外部 url。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/470877.html
上一篇:Git-新repo允許我“pulloriginmain”,但不能使用“pushoriginmain”提交并給出錯誤
