Question

在开发应用程序时，我有时会强制在每次刷新时加载CSS，以便动态加载任何css更改。

我尝试了以下内容：

<link rel="stylesheet" href="widget1.css?v={{cssRandom}}">

在聚合物代码中：

cssRandom: Math.random();

遗憾的是，这不起作用。这不是一个大问题，我可以在进行更改时手动强制使用css，但是知道是否有任何类似的解决方案会很好吗？

第二个问题与背景图像有关。由于某种原因，以下方法不起作用：

<div class="boxed" style="background: url(image.png) 170px 140px;">
    <div class="boxed-title">TITLE</div>
      <div class="boxed-info">
        INFO
      </div>
</div>

图片位于带有widget1-element.html的elements文件夹中，当我添加绝对网址时，图片会显示：

<div class="boxed" style="background: url(http://www.myapp.com/elements/image.png) 170px 140px;">

我尝试了很多相对URL的组合，但是还没有设法解决这个问题。我是否需要在elements文件夹中创建一个文件夹？

elements/widget1/assets/images

或类似的东西可以起作用吗？

Answer 1

RE：背景图片

默认情况下，自定义元素为display: inline，因此您需要指定主机display: block。然后background-image就可以了。

例如，这对我有用：

<polymer-element name="background-img" noscript>
  <template>
    <style>
      :host {
        display: block;
        background-image: url(img/d.png);
      }
    </style>
    <h1>Hello from background-img</h1>
  </template>
</polymer-element>

d.png位于img文件夹中，该文件夹是我的元素定义的兄弟。

background-img/
  img/
    d.png
  background-img.html

Answer 2

要回答您的第一个问题，Polymer目前不支持URL属性中的数据绑定，例如＆＃34; href＆＃34;。

对于您的第二个问题，这是我刚刚在platform (Github commit)

中修复的错误

Answer 3

就背景图片而言，我通过在第三方网站上托管图像来解决这个问题。不是一个优雅的解决方案，但经过几天的摆弄和搜索，我找不到解决方案。

<div class="boxed" style="background-image: url({{myObject.backgroundimage}});">

Answer 4

有点晚了，你可以简单地使用下面的代码。

注意：$ after style属性。

<div class="boxed" style$="background: url(http://www.myapp.com/elements/image.png) 170px 140px;">

Polymer：强制加载CSS和背景图像问题

4 个答案: