Ngイメージキャッシュが機能しない

Question

ng-image-cacheディレクティブを使用してイメージをキャッシュに保存します。

アセットには、インターネットに接続しなくてもイメージが表示されるように、事前ロードが必要なURLのリストが含まれています。

HTMLは次のようになります。

<div ng-repeat="asset in assets"> 
     <ui-image data-src={{asset}} data-title="{{asset}}"></ui-image> 
</div> 

textはhtmlと私はこのような画像のインスタンスを置き換えていますが含まれています

var imageUrl = text.substring(decypheredText.indexOf("\"") + 1, text.lastIndexOf("\"")); 
text.replace('img src', 'ui-image data-src') 
.replace('>', ' data-title = "' + imageUrl + '"></ui-image>'); 

任意の助けをいただければ幸いです。前もって感謝します。

Answer 1

まず、ngImageCacheは、ページのオフライン利用を提供していません。インターネット接続をオフにすると、オフラインモードを明示的に実装していないと、ブラウザはページを表示できません。AppCacheまたはService Worker。あなたがイメージをシリアル化することはできません他のドメインキャンバスtoDataURL方法から画像をロードする場合

ngImageCache負荷JavaScriptを介して画像と（デフォルトでのsessionStorage）DOMStorageでbase64で表現コンテンツをシリアライズ

あなたの問題は、CORS制限から来たことができます。 次のメッセージがクロスオリジンリソースの共有ポリシーによってロードからブロックされている「http://target-domain.com」原点から

画像コンソールに表示されている：いいえ「アクセス制御 - 許可 - 起源」ヘッダが要求に存在していますリソース。 Origin 'https://origin-domain.com'はアクセスできません。

問題を解決するには、外部のドメインからロードされた画像は、次のHTTPヘッダーの「アクセス制御 - 許可 - 起源」を返さなければなりませんCORS