イメージがCORSに実行中の場合のチェック

Question

イメージが存在するかどうかを確認するために、以下の機能を使用していますが、CORSエラーが発生しています。これらのイメージはサーバーから送信されていないので、通常のAccess-Controlヘッダーを追加することはできません。これらのイメージはローカルフォルダにあり、指定したイメージが存在するかどうかを確認するだけです。

現在のコード：

function isInFolder(url) 
    { 
     var http = new XMLHttpRequest(); 
     http.open('HEAD', url, false); 
     http.send(); 
     return http.status!=404; 
    } 

エラー：

scripts.b0f3172f.js:1 XMLHttpRequest cannot load file:///Users/robertgrzesik/Documents/Development/AngularJS/Templates_Base/dist/assets/product1/content1/info/1.png. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 

ロジック私がやろうとしている：

// Assets can be images or videos 
if(isInFolder(myAsset)) { 
    myAssetArray.push(myAsset); 
} 

Answer 1

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

を、あなたが取得しているエラーがありますかなり自明です。あなたのスクリプトがあなたのファイルシステムに直接アクセスしようとしているようですが、それは許可されていません。

ローカル開発Webサーバーを使用して資産を提供する必要があります。

Answer 2

これは、（Webサーバなしで）これを行うための最適なソリューションになってしまっ：

 var fileURL = "assets/"+scope.productDirectory+"/content1/info/"+x+".png"; 
     imageExists(fileURL, function(exists, url) { 
     if(exists) { 
      scope.contentOneSequence.push(url); 
     } 
     }); 

    function imageExists(url, callback) { 
     var img = new Image(); 
     img.onload = function() { callback(true, url); }; 
     img.onerror = function() { callback(false, url); }; 
     img.src = url; 
    }