ng样式的背景图片url无法用于Firebase存储参考

我正试图在div中加载背景图片。我尝试了几个选项，但我的页面是空白的，没有显示任何内容。下面是不同的风格我想：ng样式的背景图片url无法用于Firebase存储参考

<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div> 

<div ng-style="{'background-image': 'url('{{profilepic}}')'}"></div>

在哪里，在我的控制器：

storageRef.child('images/pic.png').getDownloadURL().then(function(url) { 
    // Get the download URL for 'images/stars.jpg' 
    // This can be inserted into an <img> tag 
    // This can also be downloaded directly 
    $scope.profilepic = url; 
}).catch(function(error) { 
    // Handle any errors 
});

有控制台日志中没有错误。我得到了实际的网址。

此作品的作品，显示正常TE的形象，但它不是我想要做到：

<div style="{'background-image': 'url('img/pic.png')'}"></div>

我通过类似的帖子去了，试过他们的解决方案，但他们都不工作。

来源

2016-06-29 M' Boulas

我终于看出了什么问题。我必须分享这一点，它可能会帮助他人。一切都很好，我的HTML如下：

<ion-content> 
    <div ng-style="{'background-image': 'url('+pic+')'}"> 
     <div class="content"> 
      <div class="avatar" ng-style="{'background-image': 'url('+profilepic+')'}"></div> 
      <h3>{{fname.txt}} {{lname.txt}}</h3> 
     </div> 
    </div> 
</ion-content>

这个问题是在我的控制器。这是我的：

auth.onAuthStateChanged(function(user) { 
    var storage = firebase.storage(); 
    var storageRef = storage.ref(); 
    var storageRefPic = ''; 
    storageRef.child('images/pic.jpg').getDownloadURL().then(function(url) { 
     storageRefDefltPic = url; 
    }).catch(function(error) { 
     // Handle any errors 
    }); 
    $scope.pic = storageRefDefltPic; 

    var storageRefProfilePic = ''; 
    storageRef.child('images/profilepic.jpg').getDownloadURL().then(function(url) { 
     storageRefProfilePic = url; 
    }).catch(function(error) { 
     // Handle any errors 
    }); 
    $scope.profilepic = storageRefProfilePic; 
    fbRef.child(userID).once('value').then(function(snapshot) { 
     $scope.fname.txt = snapshot.val().firstName; 
     $scope.lname.txt = snapshot.val().lastName; 
     $scope.pic = storageRefProfilePic; 
    }); 

});

我的变量和代码被完全混淆了。在控制台中，我意识到firebase引用在存储引用之前首先被调用，导致我的范围变量空出来，因此配置文件图像变为空白。所以我删除不必要的变量和移动的回调中存储的引用，数据快照之前，如下：

auth.onAuthStateChanged(function(user) { 
    fbRef.child(userID).once('value').then(function(snapshot) { 
     var storage = firebase.storage(); 
     var storageRef = storage.ref(); 
     var storageRefPic = ''; 
     storageRef.child('images/pic.jpg').getDownloadURL().then(function(url) { 
      $scope.pic = url; 
     }).catch(function(error) { 
      // Handle any errors 
     }); 
     storageRef.child('images/profilepic.jpg').getDownloadURL().then(function(url) { 
      $scope.profilepic = url; 
     }).catch(function(error) { 
      // Handle any errors 
     }); 
      $scope.fname.txt = snapshot.val().firstName; 
      $scope.lname.txt = snapshot.val().lastName; 
    }); 
});

现在一切正常！我感谢大家的帮助！我确实很感激你！

来源

2016-06-30 06:32:48

如果我理解你正确 - 问题解决相当容易。您需要设置div的尺寸或将一些内容放在里面，因为background-image不算作内容。

这导致一个空的div高度= 0;

这里是一个工作Fiddle

来源

2016-06-29 06:52:25

我按照你的建议添加了高度和宽度，但不起作用。 –

你检查了我的小提琴吗？ –

是非常感谢！我检查了你的小提琴。这真的很有帮助。当我在你的小提琴中尝试我的网址时，我发现两幅背景图像都被完美呈现;我意识到这与网址无关。然后，我看着我的控制台日志，看看发生了什么，并检查我的代码。这就是我意识到我的代码混淆的原因。再一次，非常感谢，这非常有帮助！你可以看到上面的代码和我的解释。 –

它应该是：

<div ng-style="{'background-image': 'url({{profilepic}})'}"></div>

在你的情况，你应该这样做：

<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div>

Updated JSFiddle

来源

2016-06-29 06:54:40

这不适合我。这里是一个[小提琴]（http://jsfiddle.net/gdeohueo/） –

我更新了答案 –

@Michelem我再次尝试第二个选项，但仍然不起作用。 –

ng样式的背景图片url无法用于Firebase存储参考

回答

相关问题