Question

我将用户个人资料信息存储在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>

Answer 1

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

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

然后从模板中调用它

style="computeStyle(item.0)"

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

中调用它

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

您还可以为包含元素提供一个ID，这样您就可以更细致地访问该样式

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

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

1 个答案: