Setting src <img> in a polymer element

Question

Below is the code for my polymer element. I tried normal binding to the house, and everything works fine.

However, src img does not work. I checked the html in the chrome dev tools and it showed that src is wrong.

The src says / img / 12.jpg here, which means that the image is in the folder where the html file is located However, it refers to the root of the folder

Expected src in dev tools: http: // localhost: 3000 / elements / image-hover / img / 12.jpg

Observed src: img / 12.jpg

What can I do to bind it to the expected src?

<dom-module id="image-hover">
             <template>
                <img src="{{imgsrc}}"/>
             </template>
        </dom-module>
        <script>
          (function() {
            Polymer({
              is: 'image-hover',

              properties: {
                imgsrc: {
                    type: String,
                    value: 'img/12.jpg'
                }
              }
          });
          })();
       </script>

Edit: I solved this problem using the content tag provided by polymer.

<content id="image" select="img"></content>

The question remains, how can I find out the source of the folder in which the item is located.

Answer 1

:

<dom-module id="image-hover">
    <template>
        <img src="{{imgsrc}}"/>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'image-hover',

        properties: {
            imgsrc: {
                type: String,
                value: function () {
                    return location.host + "/img/12.jpg";
                }
            }
        }
    });
</script>

value , String . . , URL-.

Answer 2

this.resolveUrl :

          properties: {
            imgsrc: {
                type: String,
                value: function() {return this.resolveUrl('img/12.jpg')}
            }
          }