なぜサーバー上でsvgスプライトが見えないのですか？ gulpのすべてがうまくいます

Question

svgスプライトがガルプ自体を除いてどこにも見えないという問題がありました。ここでホスティング上の何====>https://i.stack.imgur.com/N1Ko8.png

そして今含ま一口、すべてが正常に動作===>https://i.stack.imgur.com/MRQ0j.png

スクリプトは

体に

;(function(window, document) { 
    'use strict'; 

    var file  = 'img/symbols.svg', 
    revision = 1; 

    if(!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) 
    return true; 

    var isLocalStorage = 'localStorage' in window && window[ 'localStorage' ] !== null, 
    request, 
    data, 
    insertIT = function() 
    { 
     document.body.insertAdjacentHTML('afterbegin', data); 
    }, 
    insert = function() 
    { 
     if(document.body) insertIT(); 
     else document.addEventListener('DOMContentLoaded', insertIT); 
    }; 

    if(isLocalStorage && localStorage.getItem('inlineSVGrev') == revision) 
    { 
    data = localStorage.getItem('inlineSVGdata'); 
    if(data) 
    { 
     insert(); 
     return true; 
    } 
} 

try 
{ 
    request = new XMLHttpRequest(); 
    request.open('GET', file, true); 
    request.onload = function() 
    { 
     if(request.status >= 200 && request.status < 400) 
     { 
      data = request.responseText; 
      insert(); 
      if(isLocalStorage) 
      { 
       localStorage.setItem('inlineSVGdata', data); 
       localStorage.setItem('inlineSVGrev', revision); 
      } 
     } 
    } 
    request.send(); 
} 
catch(e){} 

}(window, document)); 

Answer 1

をスプライトを追加するために持っているのですデバッグステートメントを使用して、サーバー側で正しいデータを取得していることを確認しましたか？

その後、このjsスクリプトでconsole.logを使用して、コンソールにデータを記録します（またはchrome javascriptデバッガとブレークポイントを使用します）。

サーバーから適切なデータを確実に受け取ることができます。サーバーが500エラーを受け取った場合、JSは通常は実行を停止します（時には続行しますが、応答は無効です）。

このページでは、クロムデバッガの使用方法について説明します。

Get Started with Debugging JavaScript in Chrome DevTools