javascript - 对象 HTMLImageElement 显示而不是图像

Question

我创建了一个包含 2 个图像的数组并尝试显示它们，但我得到的不是图像而是文本:
对象 HTMLImageElement

我确信我的图像位于我当前正在使用的正确目录中。

< template is="auto-binding">
   <section flex horizontal wrap layout>

    <template repeat="{{item in items}}">
      <my-panel>{{item}}</my-panel>
    </template>

</section>

  <script>
  (function() {
    addEventListener('polymer-ready', function() {
        var createImage = function(src, title) {
              var img   = new Image();
              img.src   = src;
              img.alt   = title;
              img.title = title;
              return img; 
            };


    var items = [];

    items.push(createImage("images/photos/1.jpeg", "title1"));
    items.push(createImage("images/photos/2.jpeg", "title2"));

    CoreStyle.g.items = items;

      addEventListener('template-bound', function(e) {
        e.target.g = CoreStyle.g;
        e.target.items = items;
      });
    });

  })();
  </script>

我在这里错过了什么？

Answer 1

使用:

items.push(createImage(...).outerHTML);

编辑:对原始问题的更改使其余答案已过时。但无论如何我都会离开它，希望 OP 或其他人可以学到一些东西。

I got the text: object HTMLImageElement

我很确定您正在使用类似这样的方法将新元素添加到 DOM:

document.getElementById('#insert_image_here').innerHTML = items[0];

(编辑:这里发生的事情是这样的:您新创建的对象 items[0] 是一个 HTMLImageElement。当您尝试将它分配给 innerHTML，由于 innerHTML 是 String 类型，JavaScript 将尝试调用对象的 toString() 方法并将返回值设置为 innerHTML。对于 DOM 元素，toString 总是返回 object XElement。)

你需要做的是:

document.getElementById('#insert_image_here').appendChild(items[0]);