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应用，但是如果您无法通过URL直接访问图片（出于原因），您可能希望在加载后将其转换为Base64，然后设置Base64编码的字符串作为背景图片？

您可以在CSS over here中阅读有关Base64图像的内容。

否则，它就像：

一样简单

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

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

1 个答案: