2016-10-03 109 views
0

使用ng-image-cache指令將圖像保存在緩存中。Ng圖像緩存不起作用

在我們的場景中,資產包含需要預加載的url列表,以便即使沒有Internet連接也可以看到圖像。

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>'); 

任何幫助,將不勝感激。提前致謝。

回答

0

首先,ngImageCache不提供頁面的離線可用性。如果您關閉了互聯網連接,則如果不通過AppCacheService Worker明確實施離線模式,瀏覽器將無法顯示頁面。通過JavaScript

ngImageCache負荷的形象和序列化DOMStorage Base64表示內容(sessionStorage的默認情況下)

您的問題可以來自CORS限制,如果從其他域帆布toDataURL方法加載圖像無法序列圖像。顯示 以下消息在控制檯

從原點「http://target-domain.com」圖片已經從裝載由跨來源資源共享策略阻止:否「訪問控制允許來源」標題存在於所請求的資源。因此不允許訪問原產地'https://origin-domain.com'。

要解決該問題,從外部域加載的圖像必須返回以下HTTP標頭「訪問控制允許來源」 CORS

+0

你的模塊不保存圖像爲base64,對抗的值關鍵是圖片網址。它應該是一個base64 URI。 – shrey

+0

當模塊無法在base64中正確序列化圖像時,它將存儲圖像url以正確工作 –

+0

您是什麼意思?我在我的代碼中啓用了斷點,但斷點永遠不會進入js中的base64轉換代碼。 – shrey