在 Chrome 应用程序的 <img> 标记中加载外部图像答案

【问题标题】：Load an external image in <img> tag in a Chrome App在 Chrome 应用程序的 <img> 标记中加载外部图像
【发布时间】：2014-06-13 06:37:07
【问题描述】：

我想知道如何在图像标签中加载外部图像，例如：

<div id="page4">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRX1-0FwHVmDbsTFz8454Sx3fZFeQ-kO-xZ-Q6aYzMw3dCh6ybHT8TApuBPnA"/>
</div>

我要向manifest.json 添加什么内容？

它给出了以下错误：

Refused to load the image 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRX1-0FwHVmDbsTFz8454Sx3fZFeQ-kO-xZ-Q6aYzMw3dCh6ybHT8TApuBPnA' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".

【问题讨论】：

标签： javascript html google-chrome google-chrome-app content-security-policy

【解决方案1】：

应用中的内容安全政策不能放松。

如果你想在你的应用中混入外部资源（<webview>之外），你需要fetch them yourself：

您可以通过 XMLHttpRequest 获取远程资源并通过 blob:、data: 或 filesystem: URL 提供它们（请参阅Referencing external resources）。

【讨论】：

【解决方案2】：

这是一个很常见的问题，Chrome 团队为您开发了一个库来帮助您解决这个问题：Chrome Packaged Apps Resource Loader

根据文档：

您可以使用 XMLHttpRequest 和转换请求外部图像将它们放入 ObjectURL。然后将标签中的 src 属性设置为每个 ObjectURL 都应该可以工作。

由于这是一个非常常见的用例，我们创建了这个库来简化它。只需将 apps-resource-loader ral.min.js 放到您的项目然后：

var remoteImage, 
    container = document.querySelector('.imageContainer'),
    toLoad = { 'images': [ 
       'http://myserver.com/image1.png', 
       'http://myserver.com/image2.png' ] }; // list of image URLs

toLoad.images.forEach(function(imageToLoad) {
      remoteImage = new RAL.RemoteImage(imageToLoad);
      container.appendChild(remoteImage.element);
      RAL.Queue.add(remoteImage);
});
RAL.Queue.setMaxConnections(4);
RAL.Queue.start();

请记住，您需要 manifest.json 中所有域的权限你会 XHR'ing 到。如果你事先不知道那些图片将被托管，您可以请求任何网址的许可：

permissions: ['<all_urls>'],

其他用法请参见简单演示： https://github.com/GoogleChrome/apps-resource-loader/tree/master/demo

【讨论】：