css - 如何使用Firebase中的动态图像作为背景图像？

我将用户配置文件信息存储在Firebase中，其中包括指向用户图像的链接。我想将此图像用作使用Polymer firebase-collection元素填充的Material Design卡中的背景图像，以检索用户资料信息。我能够检索用户个人资料图像，但是无法通过在元素上添加样式属性来将Card的背景图像设置为用户的个人资料图像。可以将动态图像用作背景图像吗？

<dom-module id="my-element">
<template>
 <style>
 :host {
  display: block;
 }
 @media (max-width: 600px) {
   h1.paper-font-display1 {
     font-size: 24px;
   }
 }
 .demo-card-square.mdl-card {
   width: 280px;
   height: 320px;
 }
 .demo-card-square > .mdl-card__title {
   color: #000;
 }
 .circle-image {
   border-radius: 50%;
   width: 60%;
   height: 80%;
   margin: auto;
   padding-top: 14px;
 }
 </style>

 <firebase-collection
  location="myFirebaseLocation"
  order-by-child="displayName"
  data="{{users}}">
 </firebase-collection>

 <template is="dom-repeat" items="[[users]]">
  <div class="demo-card-square mdl-card mdl-shadow--2dp">
   <div class="mdl-card__title mdl-card--expand" style="background:url([[item.0.imageUrl]]) center no-repeat #46B6AC">  <!-- This does not display the image -->
    <h2 class="mdl-card__title-text">[[item.0.displayName]]</h2>
    <img src="[[item.0.imageUrl]]" class="circle-image"</> <!-- This works -->
   </div>
   <div class="mdl-card__supporting-text">
    <span>[[item.0.occupation]]</span>
   </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
     View Profile
    </a>
   </div>
  </div>
 </template>
</template>

<script>
(function() {
  Polymer({
    is: 'my-element',

    properties: {
      users: {
        type: Array,
      }
    }
  });
})();
</script>
</dom-module>

最佳答案

您需要一种计算方法来计算样式

computeStyle : function(user) {
    return "background-image: url(" + user.imageUrl + ');';
}

然后从模板调用它

style="computeStyle(item.0)"

理想情况下，您将为卡创建一个单独的元素，然后从用户的重复设置中调用它

这将为您提供一些重用和很好的分离，单一用途等

您还可以为包含的元素指定一个ID，这将使您以更精细的方式访问样式

this.$.myContainer.style.backgroundImage
             = 'url(' + this.user.imageUrl + ')';

关于css - 如何使用Firebase中的动态图像作为背景图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32467872/