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

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

根据文档：

您可以使用XMLHttpRequest和transform请求外部图像   他们进入ObjectURLs。然后将标记中的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

Answer 2

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

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

您可以通过XMLHttpRequest获取远程资源，并通过blob：，data：或filesystem：URL提供服务（请参阅Referencing external resources）。

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

2 个答案: