Loading image from 127.0.0.1 works with imgcache.js but not with angular-imgcache.js

[5amfung]

I was able to load and cache the image file using ImgCache.cacheFile() from imgcache.js. However, when I switch to using the img-cache directive like <img img-cache ic-src="{{ img_url }}">, I always got the XHR error like the following.

40    705389   log      ERROR: Download error source: http://127.0.0.1:8000/media/post/4137461961516911608/4137461961535552563_thumbnail.jpg
41    705390   log      ERROR: Download error target: /imgcache/ae85743729d59d33e5f2c8b5ec7d1047a906144e.jpg
42    705391   log      ERROR: Download error code: 0

[5amfung]

I'm using ionic. I followed the instruction to config in the angular config section and calling $init() in the run section. I also looked at the source code (https://github.com/jBenes/angular-imgcache.js/blob/master/angular-imgcache.js#L69) and the code is doing the right thing. In fact, when I test without using the directive, it worked. So I can't quite figure out how a directive would be different from calling the API directly. Very baffling.

[nopium]

Hi, @5amfung
I'm experiencing the same issue. Have you found a fix or workaround for ic-src ?

[5amfung]

No, I did not figure it out.

[awesomelin]

Don't know why it works one way but not another, however a work around for browser is to install this plug in: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh?hl=en

[lonormaly]

+1

[bsautel]

I submitted PR #24 as a workaround for this issue. In the case cross-domain policy prevents from loading image, this change provides a fallback behavior that consists in displaying directly pictures without caching them (in my use case it is better than a broken image).