Question

以下是我的聚合物元素的代码我尝试过普通的dom绑定，一切正常

然而，img的src不起作用。我检查了chrome dev工具中的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

您可以执行以下操作：

<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现在是一个使用location对象返回String的函数。可以在here找到更多信息。简而言之，它包含有关当前URL的信息。

Answer 2

您可以按如下方式使用this.resolveUrl：

##Print callback function
def printx(Xi):
    global Nfeval
    global fout
    fout.write('At iterate {0:4d},  f={1: 3.6f} '.format(Nfeval, energy(Xi)) + '\n')
    Nfeval += 1

Nfeval = 1
fout = open('BFGS_steps_NN%d' %NN +'.txt','w')

res = minimize(energy, xyzInit, method='BFGS', jac = energy_der, callback=printx, options={'disp': True})
fout.close()

在Polymer Element中设置<img/>的src

2 个答案: