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?

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?

• javascript
• html
• polymer

• Are you appending it to the DOM anywhere? – CodingIntrigue Commented Jul 18, 2014 at 10:19
• You need to use appendChild. How are you inserting it to DOM? Please provide code. – sampathsris Commented Jul 18, 2014 at 10:20
• "got the text", how, exactly? In the quoted code you're not displaying or outputting or doing anything visual with the results of createImage. – Alnitak Commented Jul 18, 2014 at 10:21
• 1 your Image() is an object, when you convert it to string and print on your page it will do a simple .toString() and you will obviously receive object HTMLImageElement... if you want it to be appended correctly to the html, either use a built in append function or take the inner html of the image and append that – Banana Commented Jul 18, 2014 at 10:23
• @Banana You mean outerHTML - images can't have innerHTML ;) – Niet the Dark Absol Commented Jul 18, 2014 at 10:31

3 Answers 3

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]);

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

Replace

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

With

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

It looks like whatever framework thingy you're using is expecting strings, not Image objects ;)