在Chrome应用中的<img>标记中加载外部图片

Question

我想知道如何在图像标记中加载外部图像,例如:

<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:".

Answer 1

应用中的内容安全政策无法放宽.

如果您想混合应用程序中的外部资源(在a之外<webview>),您需要自己获取它们:

您可以通过XMLHttpRequest获取远程资源,并通过blob:,data:或filesystem:URL为它们提供服务(请参阅引用外部资源).

Answer 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的所有域的权限.如果您事先不知道这些图像的托管位置,您可以请求任何网址的许可:

permissions: ['<all_urls>'],

有关其他用途,请参阅以下简单演示:https: //github.com/GoogleChrome/apps-resource-loader/tree/master/demo