【经验】在Chrome apps中如何加载外部图片资源

在Chrome App中如果直接直接加载外部图片文件（无论是写在样式中，或是直接img标签载入,<webview>除外），都会报如下错误：

Refused to load the image 'http://xxx.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".

原因不用多解释了，提示很清楚了，根据内容安全策略，禁止直接载入外部资源。

 

解决方案：

通过XMLHttpRequest 以blob:, data:, or 文件系统URLs的格式载入资源。

Chrome 团队已经封装好了一个库供开发者使用：Chrome Packaged Apps Resource Loader

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>'],

如果只想简单的使用，没有这么多需求而去载入一个库，可以简单的封装一个函数来处理：

function loadImage(uri,callback){
	if(typeof callback!='function'){
		callback=function(uri){
			console.log(uri);
		}
	}
	var xhr = new XMLHttpRequest();
	xhr.responseType = 'blob';
	xhr.onload = function() {
		callback(window.URL.createObjectURL(xhr.response));
	}
	xhr.open('GET', uri, true);
	xhr.send();
}

//使用方法
var imgUrl='http:xxx.jpg';
loadImage(imgUrl,function(URI){
	//Do some thing while image is load
});