объект 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

Самый простой и безопасный способ сделать это, чтобы положить 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}; 
} 

Answer 2

Использование:

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

Edit: Изменения в первоначальный вопрос оказали остальную часть ответа устарели. Но я все равно оставляю это в надежде, что ОП или кто-то может чему-то научиться.

Я получил текст: объект 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 объектов;)