Question

我一直在使用Polymer进行网站重新设计。我想将一个绑定到元素的图像显示为background-image。一个相当简单的任务，但不幸的是我遇到了一些问题。

我制作了一个代码的运行示例，以便于测试：click me。

  <polymer-element name="album-card" attributes="image">

    <template>
      <style>
        :host{
          display: block;
          position: relative;
          background-color: #99182c;
          width: 200px;
        }
        .description{
          padding: 10px;
          color: white;
        }
        .circular{
          width: 200px;
          height: 200px;
          background: url({{image}}) no-repeat;
          background-color:green;
        }
      </style><link rel="stylesheet" href="default_styles.css">

      <paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow>
      <div class="album-header" vertical layout>
        <paper-ripple class="recenteringTouch" fit></paper-ripple>
        <div class="circular">
          <!--<img src="{{image}}" />--><!-- this does work -->
        </div>
        <div class="description">
          <content select="h2"></content>
          <content select="h4"></content>
        </div>
      </div>

    </template>

    <script>
      Polymer('album-card');
    </script>

  </polymer-element>

问题在于css样式。由于某种原因，图像不会显示在以下行中：background: url({{image}}) no-repeat;。但是，在身体其他地方使用{{image}}时（在<div class="circular">中，图片会显示。

使用直接链接替换样式内的{{image}}也可以。

我做错了什么？

Answer 1

这看起来像个错误。 {{}}字面上被中断，而不是被模板引擎解析。用[[]]一次性绑定替换它们有效：http://jsbin.com/yocokire/4/edit

但是，如果可能，您应该避免在<style>内部使用数据绑定（请参阅https://github.com/Polymer/polymer/issues/270#issuecomment-24683309）。在polyfill下有perforamnce问题和问题。相反，在元素上使用style属性并在那里进行绑定：http://jsbin.com/riqizige/1/edit

聚合物图像作为背景与数据绑定

1 个答案: