An HTMLImageElement object that displays instead of an image

Question

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

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

< 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

The easiest and safest way to do it - put the img in the template and bind attributes srcand titleas follows:

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

Then createImageit looks as follows

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

Answer 2

Using:

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

. . , - - .

: object HTMLImageElement

, - , DOM:

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

(Edit: : items[0] HTMLImageElement. innerHTML, innerHTML String, JavaScript toString() innerHTML. DOM toString object XElement.)

, :

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

Answer 3

    var createImage = function(src, title) {
          var img   = new Image();
          img.src   = src;
          img.alt   = title;
          img.title = title;
          return img; 
        };

var createImage = function(src,title) {
    title = title.replace(/"/g,""");
    return '<img src="'+src+'" title="'+title+'" alt="'+title+'" />';
}

, , , , Image objects;)