通过XMLHttpRequest获取img后，将外部img作为div的背景加载

Question

我正在构建一个chrome应用程序，我想将外部img加载为<div>元素的背景图像。

我发现以下文章： https : //developer.chrome.com/apps/app_external#cross-origin

我将以下功能：

this.loadImgFromUrl = function loadImgFromUrl(url, el) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';
            xhr.onload = function(e) {
              // How to load my img as url as background ?
              //$("#img_me_area").css('background-image', 'url("' + photoUrl + '")');
            };

            xhr.send();
        } ;

我不知道如何设置了IMG作为我的div的背景。

Answer 1

我不了解Chrome Apps，但是如果您无法通过URL直接访问图像（出于某种原因），您可能希望在加载后将其转换为Base64，然后将Base64编码的字符串设置为背景图像？

您可以在此处阅读有关CSS中的Base64图像的信息 。

否则，它很简单：

("#img_me_area").css('background-image', 'url("' + url+ '")');