如何將Firebase中的動態圖片用作背景圖片？

我將用戶個人資料信息存儲在Firebase中，其中包含指向用戶圖片的鏈接。我想將此圖像用作使用Polymer firebase-collection元素填充的Material Design卡片中的背景圖像以檢索用戶配置文件信息。我能夠檢索用戶配置文件圖像，但無法通過在元素上添加樣式屬性將卡片的背景圖像設置爲用戶的配置文件圖像。是否可以使用動態圖像作爲背景圖像？如何將Firebase中的動態圖片用作背景圖片？

<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>

來源

2015-09-08 tw1742

你需要一個計算方法來計算風格

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

然後從模板調用它

style="computeStyle(item.0)"

理想情況下，你會爲卡創建一個單獨的元素，並從調用它重複設置用戶

這會給你一點重用和好分離離子，單一用途等

您還可以給您的包含元素的ID，這將讓你訪問的風格更精細的方式

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

來源

2015-09-09 08:22:16

我用這個語法來得到它的工作'style = {{computeStyle（item.0.imageUrl）}}'在Polymer中調用該函數，但另外產生的風格作爲計算函數起作用。 – tw1742

酷，我以爲computeStyle可能不僅僅是基於用戶的背景網址，但沒有任何優勢。 :) –

如何將Firebase中的動態圖片用作背景圖片？

回答

相關問題