object HTMLImageElement showing instead of image

Question

I created an array of 2 images and tried to display them, but instead of the images I got the text:
object HTMLImageElement

I am sure my images are in the right directory which I am currently working with.

< 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>

What am I missing here?

Answer 1

Use:

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

Edit: Changes to original question has rendered the rest of the answer obsolete. But I am leaving it anyway in the hope that OP or someone may learn something.

I got the text: object HTMLImageElement

I am pretty sure you are using something like this to add the new element to DOM:

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

(Edit: What happens here is this: your newly created object items[0] is an HTMLImageElement. When you try to assign it to innerHTML, since innerHTML is type of String, JavaScript will try to call the objects toString() method and set the returned value to innerHTML. For DOM elements toString always returns object XElement.)

What you need to do is this:

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

Answer 2

The easiest and safest way to do this is to put the img in the template and bind the src and title attributes like this:

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

Then createImage looks like this

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