使用数据库更改应用程序头背景图像

Question

我是网络新手，很抱歉英语不太好。但我有疑问。

我想改变聚合物的应用程序标题元素的背景图像使用数据库。当路由器的页面改变时，我想显示不同的头图像。但是这个代码不起作用。我不知道如何挑选和操纵背景图像的css。

<style>
    ...
    --app-header-background-front-layer: {
        /*This line is working*/
        /*background-image: url(/images/tmp/header_image_1.png);*/

        /*This line is NOT working*/
        background-image: url([[headerImageUrl]]);
        background-position: left center;
    };
    ...
</style>

<script>
    ...
    properties: {
        ...
        headerImageUrl: {
            type: String,
            value: "/images/tmp/header_image_1.png"
        }
        ...
    },
    ...
<script>

我找到解决办法了。尼可拉斯·朗给了我一个提示。这是我的密码。

<style>
    ...
    :host {
        ...
        /*this custom css property could be changed whenever I want */
        --header-image: url(/images/tmp/header_image_1.png);
        ...
    }
    ...
    --app-header-background-front-layer: {
        background-image: var(--header-image);
        background-position: left center;
    };
    ...
</style>

<script>
    ...
    // this function called when router's page value is changed.
    setHeader: function () {
        switch (this.page) {
            case blabla1:
                this.customStyle['--header-image'] = 'url(/images/tmp/header_image_1.png)';
                this.updateStyles();
                break;
            case blabla2:
                this.customStyle['--header-image'] = 'url(/images/tmp/header_image_2.png)';
                this.updateStyles();
                break;
            case blabla3:
                this.customStyle['--header-image'] = 'url(/images/tmp/header_image_2.png)';
                this.updateStyles();
            default :
                break;
        }
    },
    ...
<script>

Answer 1

我认为你错过了你的风格中的实际元素。

当你使用聚合物混炼胶时，你应该把它应用到相应的元素上，在你的例子中是应用程序头。

app-header {
  --app-header-background-front-layer: {
    background-image: url();
  };
}

然而，我不确定它是否可能绑定到您的风格。

您可以尝试绑定到内联样式。

在聚合物文档中他们称它为绑定到目标属性

<div style$="color: {{myColor}};">

但在您的情况下，我不完全确定这是如何工作的，因为您正在应用mixin，而不仅仅是一个单一的样式值。