Javascript 将外部图像加载到<；img>；Chrome应用程序中的标签

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

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

---

不能放松应用程序中的内容安全策略

如果您想在应用程序中混合外部资源（在

之外），您需要：

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

---

这是一个常见的问题，Chrome团队已经为您开发了一个库来帮助您解决这一问题：

根据文件：

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

因为这是一个非常常见的用例，所以我们创建了这个库来 简化它。只需将应用程序资源加载程序ral.min.js放到您的 项目，然后：

请记住，您需要manifest.json中对所有域的权限 你会很高兴的。如果你事先不知道那些 将承载图像，您可以请求任何url的权限：

权限：['

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

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();

permissions: ['<all_urls>'],