Polymer: Forcing CSS to load and background image issues

问题

While developing apps, I sometimes like to force the CSS to load on every refresh so that any css change are loaded on the fly.

I attempted the following:

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

And in the Polymer code:

cssRandom: Math.random();

This unfortunately does not work. It is not a big issue, I can force the css manually when I make changes but it would be nice to know if there are any solutions to something like this?

The second issue is relating to background images. For some reason the following does not work:

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

The image is sitting in the elements folder with widget1-element.html, the image will show when I add an absolute URL:

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

I have tried a number of combinations of relative URL's however have not managed to work this out. Do I need to create a folder in the elements folder?

elements/widget1/assets/images

Or something similar for it to work?

回答1:

RE: background images

Custom Elements are display: inline by default so you need to specify that the host should display: block. Then background-image will work.

For example, this worked for me:

<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 is inside of an img folder which is sibling to my element definition.

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

回答2:

To answer your first question, Polymer does not currently support data binding in URL attributes like "href".

To your second issue, this was a bug I just fixed in platform (Github commit)

回答3:

In terms of the background images, I have solved this by hosting the images on a third party website. Not an elegant solution but after a couple of days of fiddling and searching about I just could not find a solution.

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

回答4:

A bit late but, you can simply use the below code.

Note: The $ after style attribute.

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

来源：https://stackoverflow.com/questions/22987407/polymer-forcing-css-to-load-and-background-image-issues

标签

polymer