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

Question

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

<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 的动态图像作为背景图像？

How to use a dynamic image from Firebase as background image?

css

firebase

polymer-1.0