加载 Gif 时发生错误“拒绝加载图像，因为它违反了以下内容安全策略指令：”default-src 'none

Question

我正在尝试加载嵌入在 SVG 中的 gif。这个 SVG 在桌面上运行良好，但是当 GitHub 呈现它时，我收到一个错误。

Refused to load the image 'https://raw.githubusercontent.com/Yuvi-raj-P/Yuvi-raj-P/a7003f776781f2818d616069447ffed3e0b1f910/(moon-12.gif)' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

这就是它来自https://raw.githubusercontent.com/Yuvi-raj-P/Yuvi-raj-P/e69fb948977b0ddff0ad15e511202b2a0d6834c2/Svg.svg它不显示 Gif 这是我的 86275148 代码

<svg id="Screen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 800 400" width="800px" height="400px" direction="ltr">
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'"></meta><!--This Line Doenot Work Too-->


    <g style="isolation:isolate">

            

        

    </g>

    <style>
   
        @keyframes Float {
            50%{
                transform: translateY(-10px);
            }
        }
        @keyframes fadeout {
            100% { opacity: 1; }
            0% { opacity: 0; }
        }
        @keyframes fadein {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        #cursor {
            position: fixed;
            pointer-events: none;
            transform: none;
            transform-origin: center center;
            transition: all 300ms ease-out;
            padding: 2px;
        }
        .cursor-circle {
          stroke-dasharray: 500;
          stroke-dashoffset: 1000;
          transition: stroke-dashoffset 5s ease-out;
        }
        .cursor-circle.animate {
          stroke-dashoffset: 0;
          /* stroke: white; */
        }
        :root {
          --border: rgb(3, 169, 244);
          --g1: rgb(98, 0, 234);
          --g2: rgb(236, 64, 122);
          --g3: rgb(253, 216, 53);
        }
        .card {
            fill:black;
            stroke-width:3;
        }
        
        
        
    </style>

    



    <defs>



        <clipPath id="outer_rectangle">



            <rect width="800" height="400" rx="4.5"/>



        </clipPath>

        

           

        <linearGradient id="Gradi">

          <stop offset="5%" stop-color="#5a6a8a" />

          <stop offset="95%" stop-color="#4c4088" />

        </linearGradient>



    </defs>



    <g clip-path="url(#outer_rectangle)">

        <filter id="blur">

            <feGaussianBlur stdDeviation="15" />

        </filter>


        <rect class="card"  rx="4.5" x="0.5" y="0.5" width="790" height="390" />
        <!--The Boot Animation-->
        
        <image href="(moon-12.gif)" alt="Loading Moon" width="150" height="150" x="320" y="120"/>
        <text x="390" y="290" stroke-width="0" text-anchor="middle" style="font-family:Abhaya Libre, sans-serif;font-weight:700;font-size:20px;font-style:normal;fill:#fff; opacity: 0.3; animation: Float 2s ease infinite">

            Loading A Moon For You 

        </text>
        <!--<circle cx="700" cy="400" r="100"  fill="url(#Gradi)"  filter="url(#blur)"/> -->

        <g style="isolation:isolate">



            <!-- Total Contributions Big Number -->

            

            <g transform="translate(100,28)">

                

                
            </g>

        </g>
        
    </g>
    
    



</svg>

我正在尝试在我的 SVG 中加载一个嵌入式 gif。这似乎是一个安全问题或 GitHub 的限制。有没有办法解决这个问题，我也尝试过 APNG 和 WEBp，但出现了同样的错误。 如果你能留下你的答案就太好了，谢谢:)

Answer 1

我认为 GIF 不能加载到 SVG 中，因为 SVG 是经过数学计算的图像，可以无限缩放，而 GIF 是光栅图像。 它们以不同的方式存储在计算机上，将一个放入另一个可能是不可能的。

如果您想了解更多信息，这里有人提出了相关问题： Is it possible to convert the animated GIF to SVG?