Question

使用ng-image-cache指令将图像保存在缓存中。

在我们的场景中，资产包含需要预加载的网址列表，以便即使没有互联网连接也可以看到图像。

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明确实施离线模式，则浏览器无法显示该页面。

ngImageCache通过JavaScript加载图像并在DOMStorage中序列化base64表示内容（默认情况下为sessionStorage）

您的问题可能来自CORS限制，如果您从其他域画布加载图像toDataURL方法无法序列化图像。控制台中显示以下消息

来自原始“http://target-domain.com”的图片已被跨源资源共享策略阻止加载：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许原点“https://origin-domain.com”访问。

要解决此问题，从外部域加载的图像必须返回以下HTTP标头“Access-Control-Allow-Origin”CORS

Ng图片缓存无效

1 个答案: