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로드 자바 스크립트를 통해 이미지 (기본적으로 sessionStorage) DOMStorage에서 base64로 표현 내용을 직렬화

귀하의 문제는 CORS 제한에서 온 수 있습니다. 다음과 같은 메시지가 간 리소스 공유 정책에 의해 차단 되었기 때문에로드 'http://target-domain.com'원점에서

이미지 콘솔에 표시됩니다 : 없음 '액세스 제어 - 허용 - 원산지'헤더는 요청에 존재 의지. 따라서 원점 'https://origin-domain.com'은 액세스 할 수 없습니다.

이 문제를 해결하려면 외부 도메인에서로드 된 이미지는 다음과 같은 HTTP 헤더 '액세스 제어 - 허용 - 원산지'를 반환해야합니다 CORS