将新元素动态添加到自定义元素中Polymer

问题描述：

我正在编写一个聚合物应用程序，服务器将根据请求返回图像文件名称。 1或2个图像文件可能会返回。我想将动态生成的铁图像元素添加到阴影中。我可以检查添加了铁图像元素，但图像没有显示。怎么了？
“test3.png”与html文件已位于同一位置。将新元素动态添加到自定义元素中Polymer

<link rel="import" href="bower_components/polymer/polymer.html"> 
<link rel="import" href="bower_components/paper-styles/paper-styles.html"> 
<link rel="import" href="bower_components/iron-image/iron-image.html"> 
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html"> 

<dom-module id="iron-image_test-element"> 
<style is="custom-style"> 
    paper-spinner    { display: block; position: fixed; top:50%; left:50%; margin-top: 0px; margin-left: 0px; } 
</style> 

<template> 
    <paper-spinner id="spinner"></paper-spinner> 
</template> 

<script> 

    Polymer({ 
     is: "iron-image_test-element", 

     ready: function() { 

      //Remove server call back for simplicity 
      var img = document.createElement("iron-image"); 
      img.setAttribute("src", "test3.png"); 
      img.setAttribute("sizing", "contain"); 
      img.setAttribute("class", "preload fade"); 
      img.style.width = "400px"; 
      img.style.height = "400px"; 

      Polymer.dom(this.root).appendChild(img); 
      Polymer.dom(this.root).flush(); 
     } 

    }); 

</script>

答

使用img.src，这样你访问的绑定组件属性，而不是HTML元素的属性。

这里是你的榜样有所延长，也暴露出src属性的世界的元素之外：https://gist.github.com/IgorRubinovich/36bc1ce3a314ed7cf032

将新元素动态添加到自定义元素中Polymer

相关推荐