0

Using ng-image-cache directive to save the image in cache.

In our scenario, assets contain a list of urls that need to be preloaded so that images are visible even without a internet connection.

html looks like this:

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

text contains html and i am replacing instance of images like this:

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

Any help would be appreciated. Thanks in advance.

shrey
  • 1
  • 2

1 Answers1

0

First of all, ngImageCache doesn't provide offline availability for the page. If you turn off your internet connection the browser can't display the page if dont explicitly implement offline mode via AppCache or Service Worker.

ngImageCache load image via JavaScript and serialize base64 representation content in DOMStorage (sessionStorage by default)

Your problem can came from CORS restriction, if you load image from an other domain canvas toDataURL method can't serialize image. The following message is displayed in the console

Image from origin 'http://target-domain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://origin-domain.com' is therefore not allowed access.

To fix the problem, images loaded from an external domain must return the following HTTP Header 'Access-Control-Allow-Origin' CORS

Gregory Houllier
  • 1,277
  • 9
  • 6
  • Your module doesn't save images as base64, the value against the key is the image url. It should be a base64 URI though. – shrey Oct 04 '16 at 07:16
  • When the module cannot serialize correctly image in base64, it store image url to work correctly – Gregory Houllier Oct 04 '16 at 09:04
  • What do you mean by that? I had breakpoints enabled on my code but the breakpoint never goes inside the base64 conversion code in your js. – shrey Oct 04 '16 at 09:23
  • If image is correctly loaded [https://github.com/ghoullier/ng-image-cache/blob/master/src/services/data.js#L25-L26](Data) service call the serialize API. In your case the reject method is probably called instead of resolve – Gregory Houllier Oct 05 '16 at 12:46