加載外部圖像 <img> Chrome應用中的標記

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

應用中的內容安全政策無法放寬。

如果您想混合應用程序中的外部資源（在<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