在聚合物元素中设置 <img> 的 src

Question

下面是我的聚合物元素的代码 我已经尝试过正常的 dom 绑定，一切正常

但是，img 的 src 不起作用。 我检查了 chrome 开发工具中的 html，它显示 src 全部错误

这里的 src 说 /img/12.jpg 这意味着图像在 html 文件所在的文件夹中 然而，它指的是文件夹的根目录

开发工具中的预期 src：http://localhost:3000/elements/image-hover/img/12.jpg

观察到的src：img/12.jpg

我可以做些什么来将其编码到预期的 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>

编辑：我已经通过使用聚合物提供的内容标签解决了这个问题。

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

问题仍然存在，如何找出元素所在文件夹的来源。

Answer 1

你可以使用this.resolveUrl如下：

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

Answer 2

您可以执行以下操作：

<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 的函数。更多信息可以在here 上找到。简而言之，它包含有关当前 URL 的信息。