显示对象HTMLImageElement而不是图像

Question

我创建了一个由2张图片组成的数组，并试图显示它们，但是我得到的不是图片而是文字：
object 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或有人能学到一些东西。

我得到了文本：对象HTMLImageElement

我很确定您正在使用类似的方法向DOM中添加新元素：

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

（编辑：这是这里的情况：新创建的对象items[0]是一个HTMLImageElement。当您尝试将其分配给时innerHTML，由于innerHTML是类型String，JavaScript将尝试调用objects toString()方法并将返回值设置为innerHTML。对于DOM元素toString始终返回object XElement。 ）

您需要做的是：

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

Answer 2

最简单、最安全的方法是将 img 放入模板中并绑定src和title属性，如下所示：

<template repeat="{{item in items}}">
  <my-panel><img src="{{item.src}}" alt="{{item.title}}" title="{{item.title}}"></my-panel>
</template>

然后createImage看起来像这样

var createImage = function(src, title) {
  return {src: src, title: title};
}