html - 在 polymer 元素中设置 <img> 的 src

Question

下面是我的 polymer 元素的代码 我已经尝试过正常的 dom 绑定(bind)，一切正常

然而，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>

编辑:我已经使用 polymer 提供的内容标签解决了这个问题。

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

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

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